'autocomplete="off"'在Chrome 中不起作用

我們在表單輸入框中輸入信息，提交表單后，當我們再次進入表單頁面，雙擊輸入框時，會出現之前提交的信息，這是因為瀏覽器一般會記錄下輸入框之前提交表單的信息。這就是這篇文章要講的autocomplete.

AutoComplete控件就是指用戶在文本框輸入前幾個字母或是漢子的時候，該控件就能從存放數據的文本或是數據庫里將所有以這些字母開頭的數據提升給用戶，供用戶選擇，提供方便。

輸入框（input，textarea, select）的AutoComplete的默認值是on，其含義代表是否讓瀏覽器自動記錄之前輸入的值。

有時用戶不希望記錄之前輸入的值，這時就需要關閉AutoComplete。

1. 我們通過在form表單上加入，或者對一些輸入框單獨加入autocomplete="off"，就能達到關閉AutoComplete的目的。

1.1 在form表單上加入autocomplete="off".　　

　　<form method="post" action="login.php" name="login" autocomplete="off">

　　</form>

1.2 在輸入框中加入autocomplete="off"

　　<input id="username" type="text" name="username" maxlength="20"  autocomplete="off">

 

2. 但是有一種情況例外，就是表單中有input[type="password"]，點擊保存密碼后，在Chrome瀏覽器則自動填充了用戶名和密碼的輸入框，而IE和Firefox則不同。為了統一瀏覽器樣式，我們需要就Chrome的問題修改。

提供3鍾解決方法

2.1 修改value值

(function(){
　　if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
　　　　var selectors = document.getElementsByTagName("input");
　　　　for(var i=0;i<selectors.length;i++){
　　　　if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
　　　　　　selectors[i].value = " ";
　　　　}
　　}
　　setTimeout(function(){
　　　　for(var i=0;i<selectors.length;i++){
　　　　　　if(selectors[i].type !== "submit"){
　　　　　　　　selectors[i].value = "";
　　　　　　}
　　　　}
　　},100)
　　}
})()

2.2 修改disabled屬性

(function(){
　　if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
　　　　var selectors = document.getElementsByTagName("input");
　　　　for(var i=0;i<selectors.length;i++){
　　　　if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
　　　　　　selectors[i].disabled= true;
　　　　}
　　}
　　setTimeout(function(){
　　　　for(var i=0;i<selectors.length;i++){
　　　　　　if(selectors[i].type !== "submit"){
　　　　　　　　selectors[i].disabled= false;
　　　　　　}
　　　　}
　　},100)
　　}
})()

2.3 removes "name" and "id" attributes

(function(){
　　if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
　　　　var selectors = document.getElementsByTagName("input");
　　　　for(var i=0;i<selectors.length;i++){
　　　　　　if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
　　　　　　　　var input = selectors[i];
　　　　　　　　var inputName = selectors[i].name;
　　　　　　　　var inputid = selectors[i].id;

　　　　　　　　selectors[i].removeAttribute("name");
　　　　　　　　selectors[i].removeAttribute("id");
　　　　　　　　setTimeout(function(){
　　　　　　　　　　input.setAttribute("name",inputName);
　　　　　　　　　　input.setAttribute("id",inputid);
　　　　　　　　},1)
　　　　　　}

　　　　}

　　}
})()

個人比較推薦第三種方法，通過移除input的name和id來達到效果