Axure Tutorial: Emulates Numeric Keypad Input
Introduction
In many cases, virtual digital keyboard will appear, and learning to simulate digital keyboard input is a great bonus for a high-fidelity demo.
Widgets Setup
The 12 rectangular are as follows:
A text field to display the entered number:
Interactions Setup
Our purpose is that when the rectangle is clicked, the text box above shows or deletes the corresponding number.
Select Rectangle 1, add clicked - set text - set the value of the text field to [[Target.text]][[This.text]] , where LVAR1 is a local variable, representing the component text of the text field; the following is a screenshot of the settings:
In the property panel, copy the use case case of rectangle 1 in step 1, then select other rectangles, and paste the case when clicked.
Next, set the delete interaction:
Add a hot spot above the delete rectangle for easy clicks;
Select the hot spot, add clicked - set text - set the value of the text field to [[LVAR1.substr(0, LVAR1.length-1)]], where LVAR1 is the added local variable, representing the text field's text.
Next step sets the interaction for clearing:
The same as step 3, add a hot spot for the clear button, select the hot spot, and add on click - set text - set the text value of the text field to be empty.
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.
Thank you so much for this. Just what I needed.
Leave a comment