Is there a way to build a working Numeric keypad in Axure?

Hello,

I’m trying to figure out a way to build a numeric keypad of 0-9 so when the numbers are pressed they enter into a textfield. Is this possible? For example, a field labeled weight, once the user focuses on the field a numeric keypad appears on the screen to enter the weight. I know how to do this for one number but if the user has to press 1, 5, and 0 for a weight of 150, how can you add to a text field without replacing the previous number assigned to it.

I have attached an RP file with the elements i’m trying to get to work together. There is no conditional logic or actions assigned to them yet. Mostly because I didn’t know how to approach the situation. Thank you for any assistance you may offer.

Thanks,

Brian
numeric_keypad.rp (69.1 KB)

I’ve attached a working example. The key is you want to append the number to whatever is already in the textfield. Take a look at the action on the buttons in my example. They’re all exactly the same and you can copy paste them and change the text on them to whatever you want and it will still work. It works by taking the text on the target widget (the textfield in this case) and concatenating it with whatever text is on the widget that was clicked (This).

NOTE: With text you could do [[Target.text + This.text]] but in this case I used [[Target.text.concat(This.text)]] because since we’re using numbers Axure would actually add the numbers if I did the former.
keypad.rp (64.6 KB)

5 Likes

You Sir are the man!!! Thank you so much! Your response did not only solve my problem you took the time to explain how and why you did it! Thank you for such a fast response!

Thank you for creating such a useful widget!

To take it a step further what would be the best way to hook up a button allow you to delete the last character entered, essentially a backspace?

Appreciate any advice you can provide.

Set text on DisplayWidget to: [[target.text.substring(0,target.text.length - 1)]]

3 Likes

Thank you very much Nathan. That worked like a charm!

Thanks, this has been very helpful,

Do you know how to do with with a decimal point? because when i replace the (this.text) with a (.) it causes it to change the text to look like a formula instead of adding a decimal point.

Cheers
Chris

If you’re using it in an expression [] then make sure it is in quotes. But if all you have is [[“.”]] Then just do .

1 Like

Awesome, thanks that worked perfectly!!

Very much appreciated

If I use [[Target.text.substring(0,Target.text.length - 1)]] for backspace, I get space infront of the text box. Is there any way to clear the space when i use this backspace functionality?

You probably have a rogue space in your expression for the Set Text action.

Hey guys! i’m reading and trying - I’ve got a functioning keyboard and numeric keypad but how do I get the value I type in - into another box?
For instance, I’m on the setup page I click the text field for “day” - the numeric keypad comes up. I enter 19 (for the 19th) how do I get that value to transfer back to my “day” field on the setup page?

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.