Better Numerical Inputs for Mobile Forms
My colleagues in Chicago just launched a great responsively-designed greygoose.com, and Jason Grigsby and I were wondering how they brought up the user-friendlier telephone keypad in iOS instead of the ok-but-not-great number keypad. The team dynamically set the input type to
So here’s the recommended format for numeric input types:
<input type="number" pattern="[0-9]*" />
pattern="[0-9]*" triggers iOS to bring up the obese-finger-friendly keypad instead of the just-alright numeric keypad riddled with punctuation. Usability wins and the crowd goes wild.
By default iOS only triggers the number-only keypad on
tel inputs, but this way the input type and the keypad don’t need to be bound. Semantics win and the crowd rises to their feet in jubilation.
Also worth noting the Kindle Fire pulls up a friendlier keypad regardless of whether
pattern="[0-9]* is set:
Big thanks to Björn Rixman, Chris and Jason for working through this!
There are a few things that people pointed out in the comments or in other posts regarding numeric input types:
- Not all inputs that contain numbers (credit cards, SS#, etc) should have an input type of
number. They are best served up as text inputs, which are still free to use the pattern attribute to pull up the tel keypad on supported devices.
input type="number"inserts a thousands separator in iOS, which can screw up form submission.
- For all the talk about semantics, it really boils down to creating a user experience, which means that dynamically setting the input type to
telwith JS is a decent stopgap.
Some fine people have written about these issues in more detail: