多種方法實現(xiàn)360瀏覽器下禁止自動填寫用戶名密碼

2019-11-20 14:27:42

字體：大中小

供稿：網(wǎng)友

目前開發(fā)一個項目遇到一個很惡心的問題，本來在登陸界面輸入用戶名密碼后登陸，選擇記住密碼后，在內(nèi)容頁里面的<input type="text" id="userName" />以及<input type="password" id="password" />會把登陸界面輸入的用戶名密碼填寫在內(nèi)容頁里。而內(nèi)容頁是想建立新的子賬戶，這問題真叫一個惡心巴拉~~~

當(dāng)然，在火狐，IE8以上版本等高檔次瀏覽器下不會出現(xiàn)這種情況。問題出在360！不負眾望，本菜鳥經(jīng)過了以下的嘗試：

第一種：把瀏覽器里的自動填寫密碼取消掉。

很遺憾，這玩意對360毫無反應(yīng)，尼瑪，第一種嘗試失?。。ó?dāng)然，即便生效，作為一個開發(fā)者，不能讓所有用戶都采取這種操作！）

第二種：給input增加autocomplete="off"屬性，讓其不自動寫入用戶名和密碼。

很遺憾，這玩意360也免疫，尼瑪?shù)哪岈敚?

第三種：通過js動態(tài)修改input的type屬性：

<input type="text" id="password" onfocus="this.type='password'" />

這次360下直接把輸入的密碼顯示出來了，也就是onfocus里面的沒執(zhí)行，打個短點執(zhí)行以下，發(fā)現(xiàn)jquery報錯了。出現(xiàn) uncaught exception type property can't be changed 錯誤。很遺憾，IE下不支持對type的修改。

第四種：既然硬來不行，那只能執(zhí)行非常手段了，你不讓我改，那我不改，我隱藏你，來個障眼法！

復(fù)制代碼代碼如下:

 
$(function(){ 
$("#PWD").focus(function(){ 
$(this).hide(); 
$("#password").val("").show().css("backgroundColor","#fff").focus(); 
}); 
$("#password").blur(function(){ 
$(this).show().css("backgroundColor","#fff"); 
$("#PWD").hide(); 
}); 
$("#UN").focus(function(){ 
$(this).hide(); 
$("#userName").val("").show().css("backgroundColor","#fff").focus(); 
}); 
$("#userName").blur(function(){ 
$(this).show().css("backgroundColor","#fff"); 
$("#UN").hide(); 
}); 
}); 

注：把background-color設(shè)為#fff是因為360會默認給一個屎黃色的背景。

分別用一個id不為userName和password的輸入框，樣式設(shè)為一樣，當(dāng)我們點擊假的input的時候，讓真正的顯示出來。

復(fù)制代碼代碼如下:

 
<input id="UN" maxlength="26" type="text" title="請輸入用戶名" /> 
<input id="userName" name="user.userName" maxlength="26" style="display:none;" type="text" title="請輸入用戶名" /> 
<input id="PWD" maxlength="20" type="text" title="請輸入密碼" /> 
<input id="password" name="user.password" maxlength="20" style="display:none;" type="password" title="請輸入密碼" /> 

大功告成！

上一篇：javascript 獲取HTML DOM父、子、臨近節(jié)點

下一篇：input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣