Problem

Suppose we want to create numeric input within an HTML form.

The obvious way would be to use <input type="number" />.

However, this 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.

On mobile, 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”.

Solution

Instead of using type="number", we can use a combination of type="text" and inputmode="numeric".

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 pattern="[0-9]+".

To sum up, the final input will look something like:

<input
	id="account-number"
	name="account-number"
	type="text"
	inputmode="numeric"
	pattern="[0-9]+"
/>

References