收到短信验证码自动填充到表单,竟然是这么玩的

苹果系统上的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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354611.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web实现数据交互的几种常见方式

前言在当今社会&#xff0c;作为一名前端程序猿&#xff0c;并不是一昧的去制作静态页面就可以满足滴&#xff1b;你说你会制作网页&#xff0c;好吧&#xff0c;只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力&#xff0c;并不会为你进行加分&#xff1b; 我…

【超详细教程】如何使用TypeScript和GraphQL开发应用

GraphQL是一个专为构建灵活的API而生的强大的查询语言。它允许您为数据定义类型系统&#xff0c;因此在执行查询时&#xff0c;它仅返回所需的数据。与TypeScript一起使用时&#xff0c;GraphQL可以为开发人员提供更好的体验&#xff0c;因为它们都是类型语言。TypeScript是Jav…

jpa jsf_完整Web应用程序Tomcat JSF Primefaces JPA Hibernate –第2部分

jpa jsf托管豆 这篇文章是本教程第1部分的继续。 在“ com.mb”包中&#xff0c;您将需要创建以下类&#xff1a; package com.mb;import org.primefaces.context.RequestContext;import com.util.JSFMessageUtil;public class AbstractMB {private static final String KEEP…

【利好工具】JavaScript及时运行调试工具

今天要介绍的这个工具叫RunJS[1]&#xff0c;是运行在各大系统上的客户端&#xff0c;目前支持主流的macOS、Windows、Debian和Universal Linux平台。你可以在上面编写你的JavaScript或TypeScript代码&#xff0c;并且获得即时反馈。它的左边是代码区域&#xff0c;右边是输出结…

CIFAR-10 dataset 的下载与使用

基本信息 CIFAR-10 是一个包含60000张图片的数据集。其中每张照片为32*32的彩色照片&#xff0c;每个像素点包括RGB三个数值&#xff0c;数值范围 0 ~ 255。 所有照片分属10个不同的类别&#xff0c;分别是 airplane, automobile, bird, cat, deer, dog, frog, horse, ship, tr…

教你如何创建一款属于自己的VSCode主题

你有没有想过创建一款属于自己的VSCode主题&#xff1f;没有你想像的那么难&#xff0c;但是真正实现起来也不是那么轻松&#xff0c;需要你对将要去改变的主题的一些属性要有所了解和准备。如果你要想让你的主题适用于多种编程语言&#xff0c;并且看起来还很漂亮的话&#xf…

调试

http://www.cnblogs.com/CARPE-DIEM-wu/p/7798119.html 黄金规则 从帮助台得到的观点是不明确的 检查插头 不要想,而要看 回到目录制造失败 回到目录不要想,而要看 回到目录分而治之 回到目录一次只改一个地方 回到目录保持审计跟踪 回到目录检查插头 回到目录获得全新观点 回到…

【视频内含福利】原来手机套壳视频是这么做出来的

最近视频圈子里都在发这种视频&#xff0c;究竟是怎么做出来的&#xff1f;研究下来发现原来是用的这款名字叫Record Maker的APP&#xff0c;旨在帮助用户轻松快速给视频加上手机壳的效果。目前App Store上的版本是1.2.1&#xff0c;最近一次更新支持了iPhone11/iPhone12模型&a…

apache thrift_使用Java快速入门的Apache Thrift

apache thriftApache Thrift是由facebook创建的RPC框架&#xff0c;现在它是一个Apache项目。 Thrift允许您在不依赖语言的定义文件中定义数据类型和服务接口。 该定义文件用作编译器的输入&#xff0c;以生成用于构建通过不同编程语言进行通信的RPC客户端和服务器的代码。 您也…

前端八大灵感设计,代码变为现实

我们都知道掌握编程技术是一项很难的事情&#xff0c;没有捷径可走。需要我们在日复一日的工作中去锻炼。如果想要达到擅长甚至需要长年累月的积累。下面列举了一些可以给你带来编码灵感的例子&#xff0c;相信你看到会有想去写代码的冲动。因为一个好的工程师&#xff0c;是不…

Apple 公司开发者账号添加团队成员

Apple 公司开发者账号添加团队成员 简介 首先公司内部团队开发需要的账号类型为公司账号&#xff0c;可以添加团队成员协同开发。 账号下的团队成员有三种角色&#xff1a; Team Agent (代理) 代理: 就是注册开发者账号的那一个&#xff0c;权限最高&#xff0c;续费和创建开发…

八个使前端工程师惊艳的效果设计,码否?

我们都知道掌握编程技术是一项很难的事情&#xff0c;没有捷径可走。需要我们在日复一日的工作中去锻炼。如果想要达到擅长甚至需要长年累月的积累。 下面列举了一些可以给你带来编码灵感的例子&#xff0c;相信你看到会有想去写代码的冲动。 因为一个好的工程师&#xff0c;…

OpenStack_I版 1.准备过程

openstack是一个开源云平台&#xff0c;python开发此次部署为实验环境&#xff0c; 采用扁平化简单的网络架构部署  优点&#xff1a;低耦合的&#xff0c;模块化Nova 计算资源池Glance 镜像服务Swift 对象存储Horizon 对计算资源&#xff0c;网络资源起别…

快点,再快点!

现在看视频不来个两倍速&#xff08;或者更快&#xff09;都觉得在浪费生命。特别是在看视频教程的时候&#xff0c;文字我们可以做到一目十行&#xff0c;但是视频呢&#xff0c;如果有字幕&#xff0c;我们甚至不用听清&#xff0c;用3倍速或者4倍速完全没有问题&#xff0c;…

jetty eclipse_3个步骤实现Jetty和Eclipse集成

jetty eclipse本教程将引导您逐步了解如何集成Jetty和Eclipse&#xff0c;以及如何在Eclipse中的Jetty服务器上运行Web应用程序。 脚步&#xff1a; 安装Jetty Eclipse插件 建立网路应用程式 运行网络应用 1 –安装Jetty Eclipse插件 将服务器添加到“服务器”视图时&…

使用React和Tailwind CSS搭建项目模板

公众号关注 “太空编程”设为 “星标”&#xff0c;带你了解硬核的编程知识&#xff01;众所周知&#xff0c;Tailwind CSS框架越来越流行&#xff0c;所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板&#xff0c;一方面自己深入学习下&#xff0c;二来帮助新人更快地…

PHP实现前台页面与MySQL的数据绑定、同步更新

今天我来给大家介绍一个PHP-MySQL的小项目。 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增、删等操作语句功能。 如果有问题&#xff0c;欢迎拍砖~ 有不懂的地方&#xff0c;提出来咱们一起探讨~ 首先&#xff0c;我们先做好前台HTML、CSS样式&#xff0c;代码如下&a…

如何用Vue实现简易的富文本编辑器,并支持Markdown语法

前端开发经常会用到富文本编辑器&#xff0c;比如CKEditor&#xff0c;动不动一个库几十M的代码量&#xff0c;其中涉及许多你可能用不到的功能特性和相关设置&#xff0c;CKEditor最新版本的代码仓库就有接近2000个JS文件&#xff0c;300,000行代码。 可是如果你只需要一个简…

互联网基建成果,快速实现一个clubhouse要多久

最近国外的一款基于语音的社交软件clubhouse掀起了一股热潮&#xff0c;尤其是在Eleon Musk的带动下&#xff0c;整个互联网圈内人都在第一时间抢先体验。不管它为什么会火&#xff0c;肯定不是技术上有什么特别的优势。随着整个互联网技术生态的不断发展&#xff0c;互联网基础…

阿里帝国到底有多庞大

马云&#xff0c;男&#xff0c;1964年9月10日生于浙江省杭州市&#xff0c;祖籍浙江省嵊州市谷来镇&#xff0c; 阿里巴巴集团主要创始人&#xff0c;现担任阿里巴巴集团董事局主席、日本软银董事、TNC中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事…