Brad Frost wrote about a recent experience with a website that used <input type="number">
:
Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.”
He had me resubmit the wire transfer form. When I exited the account number field, the corner of my eye noticed the account number change ever so slightly. I quickly refocused into the field and slightly moved my index finger up on my Magic Mouse. It started looking more like a slot machine than an input field!
Brad argues that we then shouldn’t be using <input type="number">
for “account numbers, social security numbers, credit card numbers, confirmation numbers” which makes a bunch of sense to me! Instead we can use the pattern attribute that Chris Ferdinandi looked at a while back in a post all about constraint validation in HTML.
It’s worth mentioning that numeric inputs can be more complex than they appear and that their appearance and behavior vary between browsers. All good things to consider along alongside Brad’s advice when evaluating user experience.
Also:
<input inputmode="numeric"> is the way forward for mobile numeric keyboards (paired with `pattern="[0-9]*"` on iOS pending inputmode support).
Note: positive integers only!https://t.co/R9WuwXy106 https://t.co/2HiSq4ZXK0
— Zach Leatherman (@zachleat) March 25, 2019
use type=tel
Matt, that won’t actually work.
type=tel
doesn’t enforce any kind of input values, and an account number is not actually a telephone number, so it doesn’t make sense semantically (important when considering accessibility)The answer supplied in the Tweet on the page by Zach Leatherman is correct, and will give the best user experience. On mobile and tablet devices that have on screen keyboards, a numerical keyboard will be displayed to the user. On those same devices and desktops, the
pattern
will ensure only numerical input pass validation.Account numbers, phone numbers, ZIP codes and the like aren’t really numbers, they’re strings of digits. should be reserved for actual numbers, i.e. things you can do math with.
For a date field (type text because I don’t need to have the native datepicker) I set inputmode to numeric, thing that works perfectly on android devices and so I have the numeric keyboard, but not the samething on iOS, and I’m still looking for a solution for this if anyone have an idea.
Thanks
I don’t get it, what happened to the input field???