To force numeric keyboard on modern iOS and Android mobile devices, you can add the
inputmode attribute to the HTML
<input> element, for example, like so:
<input type="text" inputmode="numeric" />
This provides the hint to the browser that the type of data that might be entered by the user (while editing the element) would be numeric, which allows the browser to display a numeric virtual keyboard.
inputmode attribute has decent browser support. However, if you wish to support older versions of iOS and Android, then you may use the following:
<input type="number" inputmode="numeric" pattern="[0-9]*" />
Please note that using the regular expression pattern here would trigger browser's native validation. If you wish to disable that, you can do so by adding the
novalidate attribute (or you can customize the error message by specifying the
pattern attribute to "
[0-9]*" (or "
\d*") is actually a recommendation from apple that works for older iOS devices. However, this does not work on Android. To force numeric keyboard to show on older Android devices, you can set the
type attribute to "
Hope you found this post useful. It was published . Please show your love and support by sharing this post.