收到短信验证码自动填充到表单,还能这么玩

简介: 苹果系统上的App和网站可以实现来自短信的验证码自动填充表单的功能,通常你是怎么实现这个功能的

苹果系统上的App和网站可以实现来自短信的验证码自动填充表单的功能,通常你是怎么实现这个功能的?

有一种实现方式可能你不知道,单纯的HTML标签就能实现,不需要任何的Javascript代码

BUDFYYFT]CGUG@)~[DD]KGM.png

该特性第一次发布是在 WWDC 2018

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

官网上是这样定义的:

)N5[]4TTPXWKE95VF01C}UA.png

<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提到的“Safari 12 on macOS 10.14 and iOS 12.”已经在支持。


然而根据网站 developer.mozilla.org(MDN官方文档)提到一点,作为验证用户身份的验证码只能作为自动输入表单项的一种可能值,由此说明这种机制得不到大规模的应用。




目录
相关文章
|
6月前
uniapp进行表单效验
uniapp进行表单效验
356 0
|
5月前
扫码填写信息:使用这个设置,避免重复提交!
在用二维码进行活动报名或是物品领用时,如果有人重复提交,统计数据就会变得很麻烦。为了避免这种情况,我们可以开启【内容不可重复提交】这个设置。开启后,填表人就不能再填写 和「自己」 或 「其他填表人」 已提交的数据相同的内容。
|
6月前
在表单提交后设置文字信息,及时播报表单的提交情况
表单作为草料二维码的高级功能之一,可用于收集格式统一的数据。你可以通过组合姓名、图片、检查项等组件搭建出电子表单,关联到二维码中,扫码填写表单即可更快速、规范的收集数据。在表单设置-提交成功页设置中可以设置表单提交成功后的页面详情和后续操作,支持设置填表人提交后显示文字信息、获取二维码凭证、配置后续操作按钮、跳转到活码。下面是表单提交后显示文字信息的使用技巧。
|
移动开发
移动端(h5)自动填充短信验证码
移动端(h5)自动填充短信验证码
|
设计模式 JavaScript 数据库
表单防止重复提交的四种方式
表单防止重复提交的四种方式
288 0
|
存储 JavaScript
使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)
使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)
158 0
使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)
|
Web App开发 前端开发
|
.NET C# 开发框架
|
Java Android开发 数据格式
使用Mob进行短信验证码发送
首先,很多第三方短信验证码都可以,为什么我要选择mob的呢? 因为mob的短信验证码是完全免费mob的官网:http://wiki.mob.com/ MOB支持IOS,Android,Unity3d,Cocos2d-X的集成, 那Java怎么用呢? 其实MOB开发文档中有详细的介绍。
1412 0