Twitter style character count - Help

rp-7
#1

I’m trying to prototype an input field with a counter similar to that on Twitter that counts down the remaining characters available. However, when there are 30 characters remaining, the counter should turn from Grey to Black and when there are 10 characters remaining, the counter should turn from Black to Red.

I had it working and counting down to zero beautifully…until I added the different states of the dynamic panel for the character counter (Grey, Black & Red). Now, the counter stops at 30 when it turns black.

I’ve attached the file below.

Any suggestions? I’m totally stuck.

Thanks!
Wireframe_CharacterCounts.rp (55.9 KB)

#2

[QUOTE=ashleymckay;51885]I’m trying to prototype an input field with a counter similar to that on Twitter that counts down the remaining characters available. However, when there are 30 characters remaining, the counter should turn from Grey to Black and when there are 10 characters remaining, the counter should turn from Black to Red.

I had it working and counting down to zero beautifully…until I added the different states of the dynamic panel for the character counter (Grey, Black & Red). Now, the counter stops at 30 when it turns black.

I’ve attached the file below.

Any suggestions? I’m totally stuck.

Thanks![/QUOTE]

Took a look, question: is there a reason that you separated out OnTextChange vs OnKeyDown? It seems to work when I out everything OnTextChange. Demo

I didn’t include any of the other functionality like “back” or “delete”, but I’m not sure what that does; IMO it works fine when you just trigger every time the text changes. Axure RP file attached.
Wireframe_CharacterCounts.rp (56.3 KB)

Input Field counter and field should change colours and text
#3

alanmshen! Thank you! That worked.

In regards to “I didn’t include any of the other functionality like “back” or “delete”, but I’m not sure what that does”…that was in place to stop the counter at zero and no longer allow the user to type instead of showing negative numbers on the counter. I kept that functionality in place under “Key Down” and moved the other cases to “Text Change” instead of “Key Down”

Thank you so much!

(I’ve attached the final if you want to check it out)
Wireframe_CharacterCounts.rp (55.9 KB)

#4

Glad it worked!

#5

To count the number of characters (and words), I often use an online tool at Word Counter or Character Count Tool. They work like a charm with more extra statistics.

closed #6
unlisted #7