'autocomplete="off"'在Chrome 中不起作用
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。
网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功,chrome会弹出是否保存密码的提示框,点击保存密码按钮后,就会出现表单自动填充的问题,如图,如果用户和密码都自动填充,那么在某些网站中将非常的不安全,如支付网站。
如何解决呢,一下提供几种方法
1、修改value值(目前已失效,随着chrome版本的升级,现今版本已不再能获取到value值了,所以无法对其进行操作,貌似chrome自动填充的表单的value值是存在 DocumentFragment里的div中的,暂不知道怎么去处理,等待大神告知)
1 if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){ 2 var inputers = document.getElementsByTagName("input"); 3 for(var i=0;i<inputers.length;i++){ 4 if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 5 inputers[i].value = " "; 6 } 7 } 8 setTimeout(function(){ 9 for(var i=0;i<inputers.length;i++){ 10 if(inputers[i].type !== "submit"){ 11 inputers[i].value = ""; 12 } 13 } 14 },100) 15 }
2、 修改disabled属性
1 if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){ 2 var inputers = document.getElementsByTagName("input"); 3 for(var i=0;i<inputers.length;i++){ 4 if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 5 inputers[i].disabled= true; 6 } 7 } 8 setTimeout(function(){ 9 for(var i=0;i<inputers.length;i++){ 10 if(inputers[i].type !== "submit"){ 11 inputers[i].disabled= false; 12 } 13 } 14 },100) 15 }
3、 去除输入框的name和id属性
1 if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){ 2 var inputers = document.getElementsByTagName("input"); 3 for(var i=0;i<inputers.length;i++){ 4 if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 5 var input = inputers[i]; 6 var inputName = inputers[i].name; 7 var inputid = inputers[i].id; 8 inputers[i].removeAttribute("name"); 9 inputers[i].removeAttribute("id"); 10 setTimeout(function(){ 11 input.setAttribute("name",inputName); 12 input.setAttribute("id",inputid); 13 },1) 14 } 15 } 16 }
4、可以在不需要默认填写的input框中设置 autocomplete="new-password"
网上咱没有找到对其详细解释,但是发现163邮箱的登录注册是这么用的,
5、修改readonly属性、
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>