Character Countdown for text area

Greetings,

I have a text area and I want to limit the number of characters a user can enter. I also want to be able to show them a count down of how many characters they have left.

How can I do this in Axure?

Thanks,

Wade

Hi, Wade. Check out the example.

The best way to make the counter is to set a local variable to the text on the textarea widget, then do some subtraction. If you dig into the interaction in the example you’ll probably see what I mean.

There are two approaches I can think of to limit the input length. Neither is perfect, but one might be good enough for a prototype.

Version A simply tests the length of the input string every time it changes and lops off all characters after the limit. This isn’t great because you can see the extra characters appearing and disappearing as you type. Also, if you enter a character in the middle of the string it will push the extra characters off the end, which is an unusual behavior.

Version B has a case OnKeyDown that says, if the length is at the limit and the keystroke is anything other than the backspace or delete key, do nothing. This has the effect of blocking the text entry into the field. One downside of this approach is that if the user uses the mouse to select a section of text and then tries to type something (other than delete/back), those keystrokes will be blocked as well.

Hope this helps.

Jeff
text area length limits.rp (58.3 KB)

4 Likes

Thanks Jeff, I’ll give it a try.

W

When I tried it, I just copied the cases from your file to mine.

when I view the prototype and enter text into the text area, all I see is [[100 - input.length]]

But it works in your file.

Click the “fx” button in the lower right of the case editor to see what’s going on. “input” is a local variable that refers to the text on the text area; this wouldn’t come with the interaction if you copy and paste.

Jeff

That did it. Thanks!

Thanks for the helps. I’ve updated the dialogue with a windows version using the conditional logical that was presented here in this topic. I hope this is helpful for the next person.
Comments box.rp (58 KB)

1 Like

Thanks. It was helpful indeed

A.) You could simply add OnTextChange Set Text on This equal to [[This.text.substring(0,200)]]

B.) Or you could also place an invisible text field over your desired text area, define the text limitations of the field then set OnTextChange to Set Text of your desired text area with the text of your invisible field [[This.text]].

You’d think there’d be an easier way to do it


Hi Jeff, how to learn to do those complicated variables like input.substring input.lenght etc… Is there any topic where to start with that? I know that these are javascript methods, but to go there and know what to do with that as a UX not frontdevelepoer it’s quite hard, can u give some tip?:stuck_out_tongue:
Gracjan

Hi Gracjan,

Our reference page on expressions has a few that could help:

https://www.axure.com/support/reference/math-functions-and-expressions

For learning and testing out what the methods all do, I personally like to look them up on the W3Schools site. Here are examples for the .substring method and .length properties:

https://www.w3schools.com/jsref/jsref_substring.asp

https://www.w3schools.com/jsref/jsref_length_string.asp

Hopefully that helps!