使用什么代替数字输入

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

当您想在表单中收集数字时,您可能会想到使用 <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"
/>

最后一个属性对我来说很有趣且新鲜。 这意味着在支持它的浏览器上,您可以获得这种超级有用的体验

iOS screen with a numeric input and a text message offering to auto-fill the two-factor auth

Phil 写道,还有其他自动完成功能值

许多可用的自动完成功能值,涵盖从姓名和地址到信用卡和其他帐户详细信息的一切。 对于注册和登录,有一些自动完成功能值可以作为有用的提示:usernameemailnew-passwordcurrent-password

浏览器和密码管理器具有非常好的启发式方法来查找网页上的登录表单,但使用 usernamecurrent-password 值使其非常明显。