HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

  因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便。加了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浏览器自动填充。

 
上一篇:Solr复杂条件查询


下一篇:CSS3中的一些属性