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.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

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.

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.