By default iOS will display a standard keyboard slightly modified with a row of numbers at the top. This isn't ideal as you don't need the alphabetic keys and iOS already has a full numeric keypad it could use for the input instead. For reference, other mobile OS such as Android already display their numeric keypad when focusing a number input.
The unfortunate issue with Chris' technique as-is is the number input is no longer a number input. So while the trick nicely displays a numeric keypad on iOS the input no longer has the spinner interface on desktop browsers and other mobile devices such as Android no longer use their numeric keyboards. Wondering if this technique could be applied in a meaningful way to a number input without ruining the experience for users with other devices I started experimenting and came up with another technique.
I also realized that the use of pattern triggers the browser's native form validation. This leaves us with some ambiguity.
Spinbox would be valuable there, but those fields may need leading zeros. There very useful ways to opt-in to the big button numeric keyboard, available for use in browsers today:. We can choose between following the specification and having a sub-optimal keyboard for numeric input on a large swath of devices, or we can explore other options to make this work. Perhaps unsurprisingly to veteran web developers, Firefox is closest to the specification here, with reliable, dedicated buttons for both decimal points and negative signs.
It could be text , number , et cetera. The big button numeric keyboard does not exist on the iPad variant of iOS—only on the iPhone version. It should be noted that functionally equivalent regular expressions with the same output do not show a numeric keyboard, e. Importantly, iOS on an iPhone does not let the user switch keyboard types when the big button numeric keyboard is displayed. Entering true floating point numbers is simply not allowed, per the pattern explicitly defined. Take care to also note that the pattern attribute is overloaded to control HTML5 form validation.
(Dantman, Nadir Seen Fire)
This forces developers to choose between a numeric keyboard or a more accurate validation pattern—e. Unfortunately, the pattern trick for big button numeric keyboards only works on iOS.
I Wanted To Type a Number
I know this question is old but I felt it's a very sought after solution and decided to post an answer. Here's a solution I've created to address the iPad keyboard as well as pretty much anything. Also, this approach does not require you to use input of type number which in my humble opinion is very ugly. I had to create a keyPress event handler to capture and suppress keys on the iPad that don't seem to be handled by the keyDown event or are ambiguous???!
Learn more about Teams.
Asked 6 years, 7 months ago. Active 1 year, 5 months ago.
iOS force numeric keypad on input type=number demo
Viewed 49k times. Alex Wayne Alex Wayne k 35 35 gold badges silver badges bronze badges.
- order and chaos online ios free download.
- iOS force numeric keypad on input type=number demo.
- UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2).
For reference, my Android-based phone does this as well. Thank you for asking this. Majid Laissi Majid Laissi Thank you. The apple docs dont seem accurate then. It calls it the wrong thing type! This does work but looks like pattern is not supposed to be supported on number fields.