Using
<input type="text" inputmode="numeric" pattern="[0-9]*">
(instead of<input type="number"
) allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.
An interesting post from the UK Government listing a host of usability and accessibility problems arising from using <input type="number">
.
Now that browser support for the inputmode
attribute is sufficient, they have moved to <input type="text" inputmode="numeric">
.
I trust GOV.UK’s opinion and think I’ll follow suit.