解決瀏覽器會自動填充密碼的問題
解決辦法是在form上或input上添加autoComplete="off"這個屬性。
form表單的屬性如下所示:

但是這個解決方案在谷歌和火狐上均有bug,下面來一個一個解決。
1.'autocomplete="off"'在Chrome中不起作用解決方案
網(wǎng)站項目中,有登錄和注冊的彈框,在除chrome的瀏覽器中一切都o(jì)k,一旦在谷歌瀏覽器中,問題來了:
首先從登錄彈框中登陸成功,chrome會彈出是否保存密碼的提示框,點擊保存密碼按鈕,

然后接著退出賬戶,
這時打開注冊彈框,你會發(fā)現(xiàn)注冊彈框中用戶名和密碼也被默認(rèn)填寫進去了(登錄彈框中默認(rèn)填寫進去符合邏輯),


這現(xiàn)象就詭異了,開始各種查,cookie,本地緩存,等等,都解決不了這問題;
查閱后,很多沒有這個的解決方案。
1 通常我們會在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"],點擊保存密碼后,在Chrome瀏覽器則自動填充了用戶名和密碼的輸入框;為了統(tǒng)一樣式,我們需要就對Chrome的問題經(jīng)行單獨處理。
總結(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)上咱沒有找到對其詳細(xì)解釋,但是發(fā)現(xiàn)163郵箱的登錄注冊是這么用的,

所以就借鑒借鑒咯,測試之后也是可以解決問題的,也是最簡單的解決辦法,網(wǎng)易給您點個贊!
4 修改readonly屬性
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
但Firefox中有個Bug。首次提交后,F(xiàn)F會提示是否記住某某網(wǎng)站的密碼,點擊“記住”后 input[type=text]設(shè)置autocomplete="off"將不起作用。

有兩種情況:
1,form中沒有input[type=password],autocomplete="off"將起作用
2,去掉form,設(shè)置input[type=text]的autocomplete也起作用(測試不好用)
3.Firefox則需要使用另一個擴展屬性disableautocomplete (測試也不行)
<input type="text" disableautocomplete autocomplete="off" id="number"/>
火狐現(xiàn)在也沒有解決的辦法,,誰有麻煩告知一下哈。。。。。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
js判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
php gethostbyname獲取域名ip地址函數(shù)詳解
php gethostbyname獲取域名ip地址函數(shù),需要根據(jù)域名得到ip地址的朋友有福了。2010-01-01
html+css+js實現(xiàn)xp window界面及有關(guān)功能
xp window界面及有關(guān)功能使用前端技術(shù)實現(xiàn)不可思議吧不夠該程序在IE調(diào)試的,其他瀏覽器可能有BUG,感興趣的朋友可以參考下哈,希望可以幫助到你2013-03-03
JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
JavaScript語言中的Literal Syntax特性分析
JavaScript語言中的Literal Syntax特性分析...2007-03-03
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox...2007-11-11
微信小程序開發(fā)之實現(xiàn)自定義Toast彈框
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生,有時候官方的樣式并不能滿足業(yè)務(wù)要求,怎么辦呢,當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成WeToast,這篇文章主要給大家介紹了微信小程序開發(fā)之實現(xiàn)自定義Toast彈框的相關(guān)資料,需要的朋友可以參考下。2017-06-06

