禁止浏览器自动填充到表单

chuyao 发布于2019-08-01 18:29 / 817人阅读

摘要：于是查看浏览器页面行为，发现该表单邮箱账号密码字段被浏览器默认填写，导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式欺骗浏览器，将密码信息填写在隐藏区域。经测试问题解决。

在开发中偶然遇到的一个奇怪的问题，有一个需求会让用户输入邮箱和密码信息，该表单设置了校验规则（当触发blur时，才会触发校验），但之后的测试发现，只要进入该页面时，就会反复触发校验，导致后台接口被频繁请求。于是乎检查代码，初步判定是校验规则出现死循环导致，但考虑到需要blur才能触发校验，再三检查代码后排除代码问题。于是查看浏览器页面行为，发现该表单邮箱账号密码字段被Chrome浏览器默认填写，导致反复触发校验。

问题：

类似于这样的结构，浏览器会默认填写字段。

分析原因：

浏览器默认开启的表单填写

浏览器设置如图：

以Chrome为例，当浏览器遇到type="text"与type="password"的标签紧邻时，会触发浏览器填写行为。默认为黄色背景。

正常：

触发自动填充：

解决方式：

既然浏览器遇到type="text"与type="password"的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式“欺骗”浏览器，将密码信息填写在隐藏区域。

经测试问题解决。

GPU云服务器云服务器自动填充 js填充表单数据自动填充php js form表单填充数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51770.html

如何禁止浏览器自动填充

摘要：所以，这里给设置初始为，在用户点击聚焦后设置为，避免浏览器在页面之后判断登录表单进行回填。本文由 Deguang 发表于码路-技术博客浏览器的保存账户密码功能，给我们带来了很大的便利，但是在有些情况下，我们并不希望浏览器帮我们填充一些表单，然而autocomplete的一些参数项并不能阻止浏览器回填，这里我们来看下如何解决这个问题。问题描述：项目注册部分的表单有三项，分别为手...

jone5679 2019-08-02 11:43 评论0 收藏0
禁止浏览器自动填充到表单

摘要：于是查看浏览器页面行为，发现该表单邮箱账号密码字段被浏览器默认填写，导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式欺骗浏览器，将密码信息填写在隐藏区域。经测试问题解决。在开发中偶然遇到的一个奇怪的问题，有一个需求会让用户输入邮箱和密码信息，该表单设置了校验规则（当触发blur时，才会触发校验），但之后的测试发现，只...

EscapedDog 2019-08-29 14:22 评论0 收藏0
禁止浏览器自动填充

摘要：如何禁止浏览器自动填充属性规定输入字段是否应该启用自动完成功能方法一设置没错，是可以控制浏览器自动完成功能，但文档里说可以禁止浏览器自动填充，经过实际操作一试，然而并不能，已经失效了，经过探索发现注意在像，等项目中应该用驼峰命名法加到对如何禁止浏览器自动填充 autocomplete 属性规定输入字段是否应该启用自动完成功能方法一：设置autocomplete=new-passwo...

Jioby 2019-08-02 11:56 评论0 收藏0