Axure Tutorial: Make Text Counter of Text Area
Introduction
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