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.


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