苹果系统上的App和网站可以实现来自短信的验证码自动填充表单的功能,通常你是怎么实现这个功能的?
有一种实现方式可能你不知道,单纯的HTML标签就能实现,不需要任何的Javascript代码
该特性第一次发布是在 WWDC 2018[1]:
iOS 12 eases the tedious aspects of account setup and sign-in by automatically suggesting and using strong, unique passwords - even from within apps - and by bringing one-time codes to the QuickType bar so users can fill them with one tap.
兼容性
目前这种验证码自动填充功能仅仅在苹果系统上使用,在官方的文档上有相关介绍developer.apple.com[2]。
官网上是这样定义的:
<input id="new-password-text-field" type="password" autocomplete="new-password"/>
<input id="user-text-field" type="email" autocomplete="username"/>
<input id="password-text-field" type="password" autocomplete="current-password"/>
<input id="single-factor-code-text-field" autocomplete="one-time-code"/>
浏览器兼容性查询网站上暂时还没有相关的介绍,但是根据GitHub issue[3]提到的“Safari 12 on macOS 10.14 and iOS 12.”已经在支持。
然而根据网站 developer.mozilla.org[4](MDN官方文档)提到一点,作为验证用户身份的验证码只能作为自动输入表单项的一种可能值,由此说明这种机制得不到大规模的应用。
References
[1]
WWDC 2018: https://developer.apple.com/videos/play/wwdc2018/204[2]
developer.apple.com: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element[3]
GitHub issue: https://github.com/whatwg/html/issues/3745#issuecomment-395147558[4]
developer.mozilla.org: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete