'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');"/> 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM