Axure Tutorial: Make Text Counter of Text Area


We know that the text field of the [Number] type can limit the maximum length of the input text. It is usually used in phone numbers.

Unfortunately, multi line text field have no type difference and no maximum length limit. Finally, you can only think of using:

Function [[LVAR1.length]]: Get the length of the text (ie 1234.length=4); and function [[LVAR1.substr(from,to)]]: Intercept the string from the from bit to the to bit;

(That is, [[12345.subsstr(0,4)]]=234, which means that the first to fourth digits are intercepted.) To achieve the above effect.

Widgets Setup

User a label to make the title; drag a text area into canvas and drag two labels that represents the numerator and denominator of a number limit.
The molecule is named Number.

Interactions Setup

1. Gets the initial length of the text in the text field

When the text of numerator(Number) is loaded, the length of the text in the text field is obtained.

2. When the text in the text field changes, the length of the text in the text area is intercepted to make it equal to the text of the denominator (60).

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store