前言
合适的场景，提供给用户合适的键盘。今日早读文章由
排骨翻译分享。正文从这开始～～
在用户登录输入双重身份验证代码时，在用户体验方面存在很多冲突的可能。作为开发人员，在不能降低用户体验的前提下，应该构建支持帐户安全需求。但有时候感觉这些需求好像是一场相互之间的战争。
在这篇文章中，看看简单的input元素和HTML属性将有助于我们提高用户的双重身份验证体验。
默认体验当你为Web应用程序实现双重身份验证（可能使用Authy双重身份验证API）时，用户需要一份表单让输入一次性的密码，然后提交。你可以创建类似于以下HTML的内容：
formaction="/sessions/check-2fa"method="POST"
div
labelfor="token"Pleaseenterthecodeyouweresent:/label
inputtype="text"name="token"id="token"/
/div
buttontype="submit"Checktoken/button
/form
这已经是一个很好的经验了。input具有name和唯一ID，label使用正确的for属性显式与其关联，这对可访问性很重要。为了达到同样的效果，你还可以将label内嵌input标签。使用一点CSS时，这可能如下所示：
然而，我们可以通过增加几个属性来逐步增强这种体验。
获得正确的键盘对于带屏幕键盘的手机或设备，首先需要注意的是，我们正在展示完整的虚拟键盘。一次性密码是由数字字符组成，因此最好给用户显示一个数字键盘。
你可能会认为，将input的类型从"文本"切换到"数字"就可以解决：
inputtype="number"name="token"id="token"/
但是你错了。这确实触发了iOS上的另一个键盘，但它仍然包含了一些无用的键。
改变字段的类型会改变浏览器解释该字段的方式，但也可能导致错误;如果双重认证代码以0开头，数字字段可能会去掉前导的0。
输入模式Inputmode属性改变了浏览器应该显示的键盘，而不改变字段的数据含义。我们希望从数字键盘输入。因此，改为添加输入模式“numeric”
inputtype="text"name="token"id="token"inputmode="numeric"/
Inputmode还有许多其他值，包括电话号码的“tel”、“email”、“decimal”、“url”、“search”和“none”，以便在需要呈现自己的键盘时使用。关于CSSTricks的这篇文章提供了不同输入模式所需的所有细节。
对支持inputmode的浏览器来说是很友好的，但是几年前还是一片空白。对于较老的浏览器，还有另外一个技巧可以触发数字键盘，并免费提供一些额外的验证。
模式Pattern属性允许你使用正则表达式来验证input的内容。使用模式[0-9]*告诉浏览器只接受字段中的数字，并在不支持输入模式的浏览器中触发数字键盘。
我们的HTML现在如下所示：
input
type="text"
name="token"
id="token"
inputmode="numeric"
pattern="[0-9]*"
/
键盘是一个更简单的数字输入：
有一件事可以让填写的表格变得更加容易，那就是自动填写一次性密码。
HTML自动完成按照MDN的说法，允许Web开发人员在指定用户代理填写表单字段值时必须提供自动帮助的任何权限，以及浏览器关于该字段中预期信息类型的指导。
在iOS和macOS上的Safari浏览器中，可以利用这个优势，让浏览器提供双重认证代码，这些代码通过短信发送到设备上，属性值为“one-time-code”的auto