题目形貌

话说有一天，我如寻常一样翻开我的开辟网站举行登录操纵。浏览器很寻常的在我们举行登录操纵以后讯问我是不是须要记着暗码，懒散如我点击了记着暗码。一切都很正常的举行着，没有什么非常发作。然则，题目就涌现了。当我翻开一个新建用户的操纵，内里的输入框自动将我的用户名和暗码默许填写进去了，然后触发了内置的校验划定规矩

在我确认过在翻开编辑框的时刻已输入框的数据重置以后，最先了我的排查错位之旅。从cookie，当地缓存等等，都没有发明相干的题目。厥后发明是浏览器存在自动添补机制的题目。

浏览器自动添补机制

经由我的重复测试，以Chrome为例，当浏览器碰到type=”text”与type=”password”的<input/>标签紧邻时，会触发浏览器自动添补行动。默许为黄色背景。firefox和360浏览器的处理体式格局是：只需检测到页面里有满足添补机制的，不论是不是是display：none 的，只需检测到就直接往里添补。

解决方案

1. 设置浏览器不提醒记着暗码,记着暗码的网站都在设置里能够看到，而且能够去除(很明显，这个要领治标不治本，我就想记着暗码还不行吗？)

   

2.运用HTML5新属性autocomplete=”off” 但禁用自动添补。这个属性好像是firefox提议的，并非规范属性，所以这块主假如针对ie和猎取浏览器见效。谷歌不认可这个属性。所以在谷歌浏览器上并没有发生任何结果

3.既然浏览器碰到type=”text”与type=”password”的<input/>标签紧邻时触发自动添补行动，则将两个<input/>离隔，运用隐蔽的体式格局“诳骗”浏览器，将暗码信息填写在隐蔽地区。

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

 /*让input看不见，而不是直接display: none，假如直接display: none，有些浏览器则不见效，比方谷歌*/
 
<input  type="text"  class="is-hidden" />
<input  type="password"  class="is-hidden" />

4.修正readonly属性

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

将表单输入设为可读形式，浏览器自动添补就失效了，在焦点在该表单输入的时刻再将可读属性移除。该要领亲试简约好用

总结

在以上引见的要领并非悉数的解决要领，现在我用的是第四个要领比较多，虽然第三个要领也挺好用，然则多增添标签的范例不符合我的风格，照样默默的用了第四种要领。迎接人人补充更多的一些要领，未完待续！