【问题】:
遇到密码框,输入后,自动填充其上一个临近的input框
【原因】:
以Chrome为例,当浏览器遇到type="text"与type="password"的标签紧邻时,会触发浏览器自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到就直接往里填充。
【解决】:
既然浏览器遇到type="text"与type="password"的标签紧邻时触发自动填充行为,则将两个隔开,使用隐藏的方式“欺骗”浏览器,将密码信息填写在隐藏区域。
.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" />
example
浏览器记住密码设置过,在旧密码填密码的同时,移动电话会自动填充用户名。解决方案是在旧密码的上一个写一个隐藏的input框。