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.
The 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 title attribute).
Setting 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 <input> type attribute to "number".
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.