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?
ベストアンサー1
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/