HTML5输入类型&触摸设备键盘:适当的号码,电话&文字用法?

时间:2014-03-24 21:15:30

标签: html5 keyboard numbers html-input tel

我想在触摸设备上自动启动数字键盘以获取邮政编码和社会安全号码输入字段。邮政编码以五位数格式输入,而SSN输入为111-22-3333。我的理解是type = number和type = tel字段会自动启动相应的键盘,所以这些输入似乎合适,但我不相信它们是正确的选择。

类型=编号

我原本以为type = number将是最佳解决方案(因为它听起来在语义上是正确的),但后来发现这种类型实际上只适用于真正的数字而不是数字字符串。我已经看到博客文章自动指出浏览器包括逗号为千位分隔符,并在提交时剥离前导零(这两者都不是zip / ssn友好的。)

类型=电话

从我读过的内容来看,这似乎是解决我问题的最佳方案。我担心这种新型的含义。我真的应该使用电话领域的邮政编码和ssn吗?如果一些手机制造商决定开始显示电话领域的地址簿怎么办?这对拉链或ssn没有任何意义。

替代

我发现type = text输入的新pattern属性可用于触发iOS设备上的数字键盘,但这只能部分解决问题。

我还发现了一个新属性inputMode,它似乎是理想的解决方案,但似乎还没有被任何浏览器实现。

问题

我希望有人有建议或最佳做法?我应该使用TEL吗?我应该使用iOS解决方案而忽略其他设备吗? inputMode会工作吗?

1 个答案:

答案 0 :(得分:0)

我的建议是仅使用pattern和inputMode。 此外,如果您只接受0-999之间的整数,则可以接受Type = number,即使用户单击取消,您也可以进行额外的验证。

Type = Number即使是数字也有问题,更不用说SSN等了,因为它对负数,本地化,精度,前导零等的值有不可预测的处理,具体取决于浏览器'实施。最佳做法是避免除非你有一个固定用户群的内部网站,你知道所使用的设备/语言环境 - 除非你期望一个0到999之间的整数。负数,小数和千字符都会有问题某些设备。 此外,如果您使用'键入'即使用户单击取消按钮,页面也将验证数据。您可以全局关闭验证,但现在页面将自动删除回发后的任何无效数据!如果您接受其中任何一项,则可以使用'键入'。

Type = Tel works' today'但正如你所指出的那样,使用它是危险的,因为谁知道将来会做什么浏览器。更不用说! 122-222-2223 Ext.34'甚至没有被这些设备接受。如果是电话号码我会建议小心,否则请避免。即使HTML5规范没有说明,某些设备也会决定验证该号码。

Pattern = ...很好添加。大多数浏览器会忽略它,所以也要使用另一个验证器,但至少有较新的iOS设备会使用它,并且有45%的移动用户使用它。

InputMode = ...似乎是目前唯一的另一个希望。希望将来能得到支持。