解决浏览器保存密码自动填充问题

nicercode 发布于2019-08-23 15:31 / 877人阅读

摘要：让看不见，而不是直接，如果直接，有些浏览器则不生效，比如谷歌修改属性将表单输入设为可读模式，浏览器自动填充就失效了，在焦点在该表单输入的时候再将可读属性移除。

问题描述

话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新建用户的操作，里面的输入框自动将我的用户名和密码默认填写进去了，然后触发了内置的校验规则

在我确认过在打开编辑框的时候已经输入框的数据重置之后，开始了我的排查错位之旅。从cookie，本地缓存等等，都没有发现相关的问题。后来发现是浏览器存在自动填充机制的问题。

浏览器自动填充机制

经过我的反复测试，以Chrome为例，当浏览器遇到type="text"与type="password"的标签紧邻时，会触发浏览器自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display：none 的，只要检测到就直接往里填充。

解决方案

设置浏览器不提示记住密码,记住密码的网站都在设置里可以看到，并且可以去除(很明显，这个方法治标不治本，我就想记住密码还不行吗？)

2.使用HTML5新属性autocomplete="off" 但禁用自动填充。这个属性好像是firefox发起的，并不是标准属性，所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性。所以在谷歌浏览器上并没有产生任何效果

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

.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

 /*让input看不见，而不是直接display: none，如果直接display: none，有些浏览器则不生效，比如谷歌*/

4.修改readonly属性

将表单输入设为可读模式，浏览器自动填充就失效了，在焦点在该表单输入的时候再将可读属性移除。该方法亲试简洁好用

总结

在以上介绍的方法并不是全部的解决方法，目前我用的是第四个方法比较多，虽然第三个方法也挺好用，但是多增加标签的类型不符合我的作风，还是默默的用了第四种方法。欢迎大家补充更多的一些方法，未完待续！

GPU云服务器云服务器自动填充自动填充php js 自动填充数据自动保存

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

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

解决浏览器保存密码自动填充问题

摘要：解决浏览器保存密码自动填充问题问题描述话说有一天，我如往常一样打开我的开发网站进行登录操作。后来发现是浏览器存在自动填充机制的问题。解决浏览器保存密码自动填充问题问题描述话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新...

objc94 2019-08-23 14:46 评论0 收藏0
解决浏览器保存密码自动填充问题

摘要：让看不见，而不是直接，如果直接，有些浏览器则不生效，比如谷歌修改属性将表单输入设为可读模式，浏览器自动填充就失效了，在焦点在该表单输入的时候再将可读属性移除。问题描述话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新建用户...

Batkid 2019-08-02 14:21 评论0 收藏0
浏览器保存密码后自动填充问题

摘要：问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。加了HTML5 中的新属性autocomplete=off ，但是并没有...

Sourcelink 2019-08-02 16:03 评论0 收藏0
浏览器保存密码后自动填充问题

摘要：问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。加了HTML5 中的新属性autocomplete=off ，但是并没有...

MasonEast 2019-08-23 11:41 评论0 收藏0
如何禁止浏览器自动填充

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

jone5679 2019-08-02 11:43 评论0 收藏0