大家都知道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');"/>
