当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 16:16:32 HTML

问题描述话说有一天,我打开我的开发网站,照常登录。我们登录后浏览器问我是否需要记住密码是常有的事,我懒得点击记住密码。一切都在正常进行,没有任何异常发生。然而,问题出现了。当我打开一个新用户操作时,里面的输入框默认会自动填写我的用户名和密码,然后触发内置的验证规则。我已经确认打开编辑框时输入框中的数据被重置。之后,我就开始了我的错位排查之旅。从cookies、本地缓存等方面,均未发现相关问题。后来发现是浏览器的自动填充机制有问题。浏览器的自动填充机制是我反复测试过的。以Chrome为例,当浏览器遇到旁边有type="text"和type="password"的标签时,就会触发浏览器的自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是:只要检测到页面有填充机制,不管是否display:none,只要检测到就直接填充.解决方法设置浏览器不提示记住密码,记住密码的网站在设置里可以看到,可以去掉(很明显,这个方法是治标不治本,我可不可以就是想记得密码吗?)使用HTML5新属性autocomplete="off"但禁用自动完成。这个属性好像是firefox发起的,不是标准属性,所以这个主要对ie和浏览器有效。Google无法识别此属性。所以它对谷歌浏览器没有任何影响。由于当type="text"和type="password"的标签相邻时浏览器会触发自动填充行为,因此它将两个分开,使用隐藏的方式来“欺骗”浏览器,在隐藏区域填写密码信息。.is-hidden{位置:绝对;左:-10000px;top:-10000px;}/*让input不可见,而不是直接显示:none,如果直接显示:none,有些浏览器不会生效,比如Google*/修改readonly属性设置表单输入到可读模式,浏览器的自动填充将无效。当焦点在表单输入上时,readable属性将被移除。这种方法简单易用。上面介绍的方法并不是所有的解决方案。目前我用的较多的是第四种方法。第三种方法虽然也很好用,但是加多了标签的类型不符合要求。在我的风格里,我还是默默的使用第四种方法。