Phone: numeric keyboard for text input
android, html-input, ios, keyboard, numbers
Solution
As of mid-2015, I believe this is the best solution:
<input type="number" pattern="[0-9]*" inputmode="numeric">
This will give you the numeric keypad on both Android and iOS:
It also gives you the expected desktop behavior with the up/down arrow buttons and keyboard friendly up/down arrow key incrementing:
Try it in this code snippet:
<form>
<input type="number" pattern="[0-9]*" inputmode="numeric">
<button type="submit">Submit</button>
</form>
By combining both `type="number"` and `pattern="[0-9]*`, we get a solution that works everywhere. And, its forward compatible with the future HTML 5.1 proposed `inputmode` attribute.
Note: Using a pattern will trigger the browser's native form validation. You can disable this using the `novalidate` attribute, or you can customize the error message for a failed validation using the `title` attribute.
If you need to be able to enter leading zeros, commas, or letters - for example, international postal codes - check out this slight variant.
Credits and further reading:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
Problem
Is there a way to force the number keyboard to come up on the phone for an `<input type="text">`? I just realized that `<input type="number">` in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc. I want to emulate the numeric-keyboard functionality of `<input type="number">`, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate `input` type that does that?