Suppose we want to create numeric input within an HTML form.
The obvious way would be to use
<input type="number" />.
type="number" expects to get a countable number, which is not always the case.
For example, this field could be an “Account Number” field. This is just a random sequence of digits that cannot be counted.
type="number" will change the keyboard to a numbers-only keyboard, which is a good user experience.
However, on desktop, it will automatically add up and down buttons to the input, to add or subtract the number. This, of course, is not desirable in a field like “Account Number”.
Instead of using
type="number", we can use a combination of
This will trigger the numeric keypad on mobile while keeping the normal text input display on desktop.
We can improve this even further and add a field validation that will only accept numbers. This can be done by adding
To sum up, the final input will look something like:
<input id="account-number" name="account-number" type="text" inputmode="numeric" pattern="[0-9]+" />