摘要:于是查看浏览器页面行为,发现该表单邮箱账号密码字段被浏览器默认填写,导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为,则将两个隔开,使用隐藏的方式欺骗浏览器,将密码信息填写在隐藏区域。经测试问题解决。
在开发中偶然遇到的一个奇怪的问题,有一个需求会让用户输入邮箱和密码信息,该表单设置了校验规则(当触发blur时,才会触发校验),但之后的测试发现,只要进入该页面时,就会反复触发校验,导致后台接口被频繁请求。于是乎检查代码,初步判定是校验规则出现死循环导致,但考虑到需要blur才能触发校验,再三检查代码后排除代码问题。于是查看浏览器页面行为,发现该表单邮箱账号密码字段被Chrome浏览器默认填写,导致反复触发校验。
类似于这样的结构,浏览器会默认填写字段。
浏览器默认开启的表单填写
浏览器设置如图:
以Chrome为例,当浏览器遇到type="text"与type="password"的标签紧邻时,会触发浏览器填写行为。默认为黄色背景。
正常:
触发自动填充:
既然浏览器遇到type="text"与type="password"的标签紧邻时触发自动填充行为,则将两个隔开,使用隐藏的方式“欺骗”浏览器,将密码信息填写在隐藏区域。
经测试问题解决。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51770.html
摘要:所以,这里给设置初始为,在用户点击聚焦后设置为,避免浏览器在页面之后判断登录表单进行回填。 本文由 Deguang 发表于 码路-技术博客 浏览器的保存账户密码功能,给我们带来了很大的便利,但是在有些情况下,我们并不希望浏览器帮我们填充一些表单,然而autocomplete的一些参数项并不能阻止浏览器回填,这里我们来看下如何解决这个问题。 问题描述: 项目注册部分的表单有三项,分别为手...
摘要:于是查看浏览器页面行为,发现该表单邮箱账号密码字段被浏览器默认填写,导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为,则将两个隔开,使用隐藏的方式欺骗浏览器,将密码信息填写在隐藏区域。经测试问题解决。 在开发中偶然遇到的一个奇怪的问题,有一个需求会让用户输入邮箱和密码信息,该表单设置了校验规则(当触发blur时,才会触发校验),但之后的测试发现,只...
阅读 565·2021-08-17 10:15
阅读 1675·2021-07-30 14:57
阅读 1942·2019-08-30 15:55
阅读 2790·2019-08-30 15:55
阅读 2671·2019-08-30 15:44
阅读 633·2019-08-30 14:13
阅读 2341·2019-08-30 13:55
阅读 2564·2019-08-26 13:56