浏览器自动填充密码机制
经过我的反复测试,以Chrome为例,当浏览器遇到type="text"与type="password"的标签紧邻时,会触发浏览器自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到就直接往里填充。
解决方案
设置浏览器不提示记住密码,记住密码的网站都在设置里可以看到,并且可以去除(很明显,这个方法治标不治本,我就想记住密码还不行吗?)
使用HTML5新属性autocomplete="off" 但禁用自动填充。这个属性好像是firefox发起的,并不是标准属性,所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性。所以在谷歌浏览器上并没有产生任何效果
既然浏览器遇到type="text"与type="password"的标签紧邻时触发自动填充行为,则将两个隔开,使用隐藏的方式“欺骗”浏览器,将密码信息填写在隐藏区域。
.is-hidden {
position: absolute;
left: -10000px;
top: -10000px;
}
复制代码/*让input看不见,而不是直接display: none,如果直接display: none,有些浏览器则不生效,比如谷歌*/
复制代码
修改readonly属性
复制代码将表单输入设为可读模式,浏览器自动填充就失效了,在焦点在该表单输入的时候再将可读属性移除。该方法亲试简洁好用
总结
在以上介绍的方法并不是全部的解决方法,目前我用的是第四个方法比较多,虽然第三个方法也挺好用,但是多增加标签的类型不符合我的作风,还是默默的用了第四种方法。欢迎大家补充更多的一些方法,未完待续!
|