当您想在表单中收集数字时,您可能会想到使用 <input type="number">。 但它存在各种问题。 首先,有时您想要的类似数字,但并非数字(例如信用卡号带有空格),因为它实际上只是一个数字字符串。 更重要的是,存在各种屏幕阅读器问题。
Hanna Laakso 记录了 GOV.UK 的问题。 以下是他们的解决方案
<input type="text" inputmode="numeric" pattern="[0-9]*">
inputmode 属性非常出色,而且 我们对此进行了深入探讨.
Phil Nash 得出几乎完全相同的结论,并在 Twilio 博客上发布了关于 改善双重身份验证代码输入体验的文章
<input
type="text"
name="token"
id="token"
inputmode="numeric"
pattern="[0-9]*"
autocomplete="one-time-code"
/>
最后一个属性对我来说很有趣且新鲜。 这意味着在支持它的浏览器上,您可以获得这种超级有用的体验

Phil 写道,还有其他自动完成功能值
有 许多可用的自动完成功能值,涵盖从姓名和地址到信用卡和其他帐户详细信息的一切。 对于注册和登录,有一些自动完成功能值可以作为有用的提示:
username、new-password、current-password。
浏览器和密码管理器具有非常好的启发式方法来查找网页上的登录表单,但使用username和current-password值使其非常明显。
我已经看到针对 gov.uk 文章发表的几篇帖子,它们似乎都存在同一个问题:它们试图收集的值不是数字,而是数字字符串。
我认为这篇文章的标题可以改成“当你没有要求数字时,应该使用什么代替数字输入”。
我觉得我在开头的段落中已经说得很清楚了。
这是一个非常典型的问题。 一年前的 Brad:https://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/
您指的是哪个“最后一个属性”? (自动完成似乎对输入类型没有影响,至少我观察不到)。
我在这里进行了一次快速测试
输入选项(用于屏幕键盘)的结果在 Android 上的 Firefox/Chrome 和 iOS Safari(仅在 iPad 上测试)之间差异很大。
它太不一致了,以至于我不会依赖这些设置来进行特定输入过滤或结果。(这太可惜了)。
但似乎我们正在接近一种“更少代码”的方法来帮助我们程序员进行前端验证。
是的,我的意思是
autocomplete="one-time-code"。 如果你无法在设备上打开它并给自己发送一条格式类似于这些双重身份验证代码的短信,可能很难测试它。值得一提的是,在 Android 上使用 inputmode=”decimal” 可能会很乱。 OEM 可以使用自己的键盘,其中一些键盘没有逗号、句点和减号键,用户将无法键入所需内容。
在较新的 Android 版本中,支持得到了改善,但应与不同的供应商进行广泛的测试。