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.


1 comment


  • MM

    Thank you so much for this. Just what I needed.


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.