這篇文章主要介紹了web開發(fā)中如何解決瀏覽器會(huì)自動(dòng)填充密碼的問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)百色免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

解決辦法是在form上或input上添加autoComplete="off"這個(gè)屬性。

form表單的屬性如下所示：

但是這個(gè)解決方案在谷歌和火狐上均有bug,下面來一個(gè)一個(gè)解決。

1.'autocomplete="off"'在Chrome中不起作用解決方案

網(wǎng)站項(xiàng)目中，有登錄和注冊(cè)的彈框，在除chrome的瀏覽器中一切都o(jì)k，一旦在谷歌瀏覽器中，問題來了：

首先從登錄彈框中登陸成功，chrome會(huì)彈出是否保存密碼的提示框，點(diǎn)擊保存密碼按鈕，

然后接著退出賬戶，

這時(shí)打開注冊(cè)彈框，你會(huì)發(fā)現(xiàn)注冊(cè)彈框中用戶名和密碼也被默認(rèn)填寫進(jìn)去了（登錄彈框中默認(rèn)填寫進(jìn)去符合邏輯），

這現(xiàn)象就詭異了，開始各種查，cookie，本地緩存，等等，都解決不了這問題；

查閱后，很多沒有這個(gè)的解決方案。

1  通常我們會(huì)在form表單上加入autocomplete="off" 或者 在輸入框中加入autocomplete="off"

<form method="post" action="" name="login" autocomplete="off"> 
</form> 
//或者 
<input id="name" type="text" name="name" maxlength="20" autocomplete="off">

2  但是有一種情況例外，就是表單中有input[type="password"]，點(diǎn)擊保存密碼后，在Chrome瀏覽器則自動(dòng)填充了用戶名和密碼的輸入框；為了統(tǒng)一樣式，我們需要就對(duì)Chrome的問題經(jīng)行單獨(dú)處理。

總結(jié)了4種解決方案，如下：

1 修改disabled屬性

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

2 去除輸入框的name和id屬性

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

3.可以在不需要默認(rèn)填寫的input框中設(shè)置 autocomplete="new-password"

網(wǎng)上咱沒有找到對(duì)其詳細(xì)解釋，但是發(fā)現(xiàn)163郵箱的登錄注冊(cè)是這么用的，

所以就借鑒借鑒咯，測(cè)試之后也是可以解決問題的，也是最簡單的解決辦法，網(wǎng)易給您點(diǎn)個(gè)贊！

4 修改readonly屬性

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

但Firefox中有個(gè)Bug。首次提交后，F(xiàn)F會(huì)提示是否記住某某網(wǎng)站的密碼，點(diǎn)擊“記住”后 input[type=text]設(shè)置autocomplete="off"將不起作用。

有兩種情況：

1，form中沒有input[type=password]，autocomplete="off"將起作用

2，去掉form，設(shè)置input[type=text]的autocomplete也起作用（測(cè)試不好用）

3.Firefox則需要使用另一個(gè)擴(kuò)展屬性disableautocomplete  （測(cè)試也不行）

<input type="text"  disableautocomplete autocomplete="off"  id="number"/>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“web開發(fā)中如何解決瀏覽器會(huì)自動(dòng)填充密碼的問題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：web開發(fā)中如何解決瀏覽器會(huì)自動(dòng)填充密碼的問題-創(chuàng)新互聯(lián)
URL分享：http://chinadenli.net/article44/eoshe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、企業(yè)建站、App設(shè)計(jì)、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)