HTML5 Input Types & Touch Device Keyboards: Appropriate Number, Tel & Text Usage? -
i automatically initiate numeric keyboard on touch devices zip code , social security number input fields. zip codes entered in 5 digit format, while ssns entered 111-22-3333. understanding type=number , type=tel fields automatically initiate appropriate keyboard, these inputs seem appropriate, i'm not confident right choice.
type=number
i thought type=number optimal solution (since sounds semantically correct), have since found type true numbers , not strings of numeric characters. i've seen blog posts making accusations of browsers automatically including comma thousands separator, , stripping leading zeros on submission (neither of zip/ssn friendly).
type=tel
from have read, seems best solution problem. i'm concerned meaning of new type though. should using telephone field zip code , ssn? if mobile phone manufacturer decides start showing address book tel fields? make no sense zip or ssn.
alternatives
i've found new pattern attribute of type=text inputs can used trigger numeric keyboard on ios devices, partially solves problem.
i've found new attribute inputmode seems ideal solution, doesn't seem implemented browsers yet.
the question
what i'm hoping has suggestion or best practice? should use tel? should go ios solution , ignore other devices? inputmode ever work? in advance insight can give me! :)
my suggestion use pattern , inputmode only. additionally, type = number acceptable if accepting integers between 0-999 , okay validation done - if user clicks cancel.
type=number has issues if number, let alone ssn etc, has unpredictable handling of values regard negative numbers, localization, precision, leading zeroes, etc, depending on browser's implementation. best practice avoid unless have internal website fixed user base know devices/locales being used - unless expecting integer between 0 , 999. negative numbers, decimals, , thousand characters have problems on devices. in addition, if use 'type' page validate data if user clicks cancel button. globally turn off validation, page auto-delete invalid data on post back! if either of these acceptable you, can use 'type'.
type=tel works 'today' point out, dangerous use knows browsers in future. not mention '122-222-2223 ext.34' isn't accepted these devices. advise caution if phone number, , avoidance otherwise. day may come device decides validate number though html5 specs not to.
pattern=... add. browsers ignore it, use validator well, @ least newer ios devices use it, , that's 45% of mobile users.
inputmode=... seems other hope @ time. supported in future.
Comments
Post a Comment