如何禁止浏览器自动填充

jone5679 发布于2019-08-02 11:43 / 705人阅读

摘要：所以，这里给设置初始为，在用户点击聚焦后设置为，避免浏览器在页面之后判断登录表单进行回填。

本文由 Deguang 发表于码路-技术博客

浏览器的保存账户密码功能，给我们带来了很大的便利，但是在有些情况下，我们并不希望浏览器帮我们填充一些表单，然而autocomplete的一些参数项并不能阻止浏览器回填，这里我们来看下如何解决这个问题。

问题描述：

项目注册部分的表单有三项，分别为手机号、验证码和密码，当完成注册操作后，浏览器提醒是否保存密码，用户名部分显示的是验证码，点击保存后，打开登录页面，手机号和密码项被分别填充为了验证码和密码，给用户带来了一定的不便。

解决过程：

1. 第一反应考虑到的是，给登录表单的标签，增加autocomplete="off"

MDN autocomplate 文档

"off"

The browser is not permitted to automatically enter or select a value for this field. It is possible that the

document or application provides its own autocomplete feature, or that security concerns require that the
field"s value not be automatically entered.

Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site"s login form. See the autocomplete attribute and login fields.

在autocomplete的文档中说明了value为off时，浏览器禁止给当前字段自动的输入或者选中一个值，但下方Note言明：在大多数现代浏览器中，off 值不能阻止浏览器的密码管理工具自动填充，所以第一次尝试失败；

2. 动态设置密码 input 标签 type

这样设置可以保证用户在点击密码框之前，避免浏览器识别为登录表单、自动填充。

这里多说两句，浏览器是如何判断当前表单需要 autocomplete，浏览器自动保存表单是当前 form 存在 type 为 password 的input、且该 input 为表单中的第二个 input 输入框。

所以，这里给 password 设置初始 type 为 text，在用户点击 input 聚焦后设置 type 为 password ，避免浏览器在页面 onload 之后判断登录表单进行回填。这样可以解决大部分场景下对于避免回填的需要。然而我们的业务需要依据跳转链接中的 param 给用户填充密码，这就导致了在用户主动 focus 之前，密码会被明文展示，聚焦后又会隐藏，操作体验不佳；

3. page.onload 后 js 控制 input type
方法同上，问题点在于页面load 后手动设置 input type 为 password，而后根据 page url 参数填充表单。

但存在问题是浏览器填充的时机无法控制，导致业务填充表单被自动填充覆盖；方案pass；

4. autocomplete 设置其他参数

autocomplete 除了 on、off 之外，还有很多参数：name、email、username、new-password、current-password、street-address 等等；

当 input type 为 password 但 autocomplete 为 new-password，即可解决浏览器自动填充问题，浏览器将当前输入框识别为新密码，便不会自阿东填充值。（PS：有例子提到，设置 autocomplete 为一个任意字符串，也能达到相同效果，大家可以试一下）

idc机房托管专线服务自动填充自动填充php js 自动填充数据自动增加行禁止

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

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

禁止浏览器自动填充

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

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

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

chuyao 2019-08-01 18:29 评论0 收藏0
禁止浏览器自动填充到表单

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

EscapedDog 2019-08-29 14:22 评论0 收藏0