JAVA高级面试进阶训练营视频教程

admin

　　因为业务需求，在写一个注册页面的时候，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。加了HTML5 中的新属性autocomplete="off" ，但是并没有产生效果。 反复测试后发现浏览器自动填充机制是满足：页面里有一个type=password的input且这个input前面有一个type=text的input。的时候就会进行自动填充。

　　firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display：none 的，只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。而chrome 54版本略有不同：满足上面的条件且页面里只有一个type=password 的input。才会自动给第一个type=text 的input填充账号，给type=password 的input填充密码。所以chrome 54版本不存在注册页面自动填充的问题。 Google出来的方法是修改input的type , 页面里input都写成type=text ， 等获得焦点的时候给改成type=password。下意识去搜了下IE下修改type，发现IE下type是个只读属性，修改type的方法并不能兼容IE。（网上说的 disableautocomplete 我试了下不能阻止360就没再用。）

　　于是自己尝试着写了个方法，页面里相应的input写成type=text,当页面加载好后，执行一个10毫秒的定时器，remove掉这些input，重新给页面里添加type=password 的input 。相对应的事件都改成用on绑定。 firefox下自动填充的问题解决了，并且也兼容了IE，但是。。。360浏览器你什么时候添加他什么时候就给你填充！┻━┻︵╰(‵□′)╯︵┻━┻ ，这时候发现网易邮箱的输入框是这么写的 autocomplete="new-password" ，尝试试了一下，竟然成功兼容360了！然后试了下 readonly ，写在定时器里removeAttr 掉只读属性，也能阻止360浏览器自动填充。