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

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

时间:2023-04-02 13:15:20 HTML

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