Dialog for number input


#1

What’s the best approach to input numbers?
The case is the following:

The user have to enter a 5 digit number (must be five, no more no less).
It may be a popup or modal.

I was thinking about number picker, but couldn’t find a plugin or something anywhere.

Can someone help me out on this?


#2

if you set the input type=“number” you get the html5 number spinner.
The newest mobile and non-mobile browsers should support it.


#3

Are you sure? http://ionicframework.com/html5-input-types/#number shows the keyboard, not a spinner…


#4

You need to add the pattern attribute.

<input type="number" pattern="\d*">.


#5

On mobile phones you get a keyboard only for numbers.

the spinner is for non-mobile devices.


#6

Is something like http://developer.android.com/design/building-blocks/pickers.html possible?


#7

Not with five spinners next to each other, only single spinners (http://developer.android.com/design/media/picker_space.png).

If you want to create a single spinner for each digit you can create with <select> and ten <option> an step to the next after you selected the digit.


#8

… or your write your own phonegap plugin in native language like java and objective-c/xcode ^^.

I think @dschniepp approach to use 5 select inputs is the smartest one for validation and so on.

Greetz, bengtler