多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫用戶名密碼
更新時(shí)間:2014年06月16日 17:15:31 投稿:whsnow
這篇文章主要介紹了多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫用戶名密碼,需要的朋友可以參考下
目前開發(fā)一個(gè)項(xiàng)目遇到一個(gè)很惡心的問(wèn)題,本來(lái)在登陸界面輸入用戶名密碼后登陸,選擇記住密碼后,在內(nèi)容頁(yè)里面的<input type="text" id="userName" />以及<input type="password" id="password" />會(huì)把登陸界面輸入的用戶名密碼填寫在內(nèi)容頁(yè)里。而內(nèi)容頁(yè)是想建立新的子賬戶,這問(wèn)題真叫一個(gè)惡心巴拉~~~
當(dāng)然,在火狐,IE8以上版本等高檔次瀏覽器下不會(huì)出現(xiàn)這種情況。問(wèn)題出在360!不負(fù)眾望,本菜鳥經(jīng)過(guò)了以下的嘗試:
第一種:把瀏覽器里的自動(dòng)填寫密碼取消掉。
很遺憾,這玩意對(duì)360毫無(wú)反應(yīng),尼瑪,第一種嘗試失?。。ó?dāng)然,即便生效,作為一個(gè)開發(fā)者,不能讓所有用戶都采取這種操作?。?
第二種:給input增加autocomplete="off"屬性,讓其不自動(dòng)寫入用戶名和密碼。
很遺憾,這玩意360也免疫,尼瑪?shù)哪岈敚?
第三種:通過(guò)js動(dòng)態(tài)修改input的type屬性:
<input type="text" id="password" onfocus="this.type='password'" />
這次360下直接把輸入的密碼顯示出來(lái)了,也就是onfocus里面的沒執(zhí)行,打個(gè)短點(diǎn)執(zhí)行以下,發(fā)現(xiàn)jquery報(bào)錯(cuò)了。出現(xiàn) uncaught exception type property can't be changed 錯(cuò)誤。很遺憾,IE下不支持對(duì)type的修改。
第四種:既然硬來(lái)不行,那只能執(zhí)行非常手段了,你不讓我改,那我不改,我隱藏你,來(lái)個(gè)障眼法!
$(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是因?yàn)?60會(huì)默認(rèn)給一個(gè)屎黃色的背景。
分別用一個(gè)id不為userName和password的輸入框,樣式設(shè)為一樣,當(dāng)我們點(diǎn)擊假的input的時(shí)候,讓真正的顯示出來(lái)。
<input id="UN" maxlength="26" type="text" title="請(qǐng)輸入用戶名" />
<input id="userName" name="user.userName" maxlength="26" style="display:none;" type="text" title="請(qǐng)輸入用戶名" />
<input id="PWD" maxlength="20" type="text" title="請(qǐng)輸入密碼" />
<input id="password" name="user.password" maxlength="20" style="display:none;" type="password" title="請(qǐng)輸入密碼" />
大功告成!
當(dāng)然,在火狐,IE8以上版本等高檔次瀏覽器下不會(huì)出現(xiàn)這種情況。問(wèn)題出在360!不負(fù)眾望,本菜鳥經(jīng)過(guò)了以下的嘗試:
第一種:把瀏覽器里的自動(dòng)填寫密碼取消掉。

很遺憾,這玩意對(duì)360毫無(wú)反應(yīng),尼瑪,第一種嘗試失?。。ó?dāng)然,即便生效,作為一個(gè)開發(fā)者,不能讓所有用戶都采取這種操作?。?
第二種:給input增加autocomplete="off"屬性,讓其不自動(dòng)寫入用戶名和密碼。
很遺憾,這玩意360也免疫,尼瑪?shù)哪岈敚?
第三種:通過(guò)js動(dòng)態(tài)修改input的type屬性:
<input type="text" id="password" onfocus="this.type='password'" />
這次360下直接把輸入的密碼顯示出來(lái)了,也就是onfocus里面的沒執(zhí)行,打個(gè)短點(diǎn)執(zhí)行以下,發(fā)現(xiàn)jquery報(bào)錯(cuò)了。出現(xiàn) uncaught exception type property can't be changed 錯(cuò)誤。很遺憾,IE下不支持對(duì)type的修改。
第四種:既然硬來(lái)不行,那只能執(zhí)行非常手段了,你不讓我改,那我不改,我隱藏你,來(lái)個(gè)障眼法!
復(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是因?yàn)?60會(huì)默認(rèn)給一個(gè)屎黃色的背景。
分別用一個(gè)id不為userName和password的輸入框,樣式設(shè)為一樣,當(dāng)我們點(diǎn)擊假的input的時(shí)候,讓真正的顯示出來(lái)。
復(fù)制代碼 代碼如下:
<input id="UN" maxlength="26" type="text" title="請(qǐng)輸入用戶名" />
<input id="userName" name="user.userName" maxlength="26" style="display:none;" type="text" title="請(qǐng)輸入用戶名" />
<input id="PWD" maxlength="20" type="text" title="請(qǐng)輸入密碼" />
<input id="password" name="user.password" maxlength="20" style="display:none;" type="password" title="請(qǐng)輸入密碼" />
大功告成!
您可能感興趣的文章:
- 設(shè)為首頁(yè)加入收藏兼容360/火狐/谷歌/IE等主流瀏覽器的代碼
- 用js判斷是否為360瀏覽器的實(shí)現(xiàn)代碼
- JS判斷是否360安全瀏覽器極速內(nèi)核的方法
- 360瀏覽器文本框獲得焦點(diǎn)后被android軟鍵盤遮罩該怎么辦
- destoon在360瀏覽器下出現(xiàn)用戶被強(qiáng)行注銷的解決方法
- 分享php代碼將360瀏覽器導(dǎo)出的favdb的sqlite數(shù)據(jù)庫(kù)文件轉(zhuǎn)換為html
- jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
- 用Meta標(biāo)簽控制360瀏覽器默認(rèn)極速模式打開自己的網(wǎng)站
- 淺談解決360兼容模式瀏覽器的方法
相關(guān)文章
jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01jquery trigger函數(shù)執(zhí)行兩次的解決方法
這篇文章主要介紹了jquery trigger函數(shù)執(zhí)行兩次的解決方法,詳細(xì)分析了trigger函數(shù)執(zhí)行兩次的原因與響應(yīng)的解決技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-02-02jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)?lái)一篇jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08jQuery在IE下使用未閉合的xml代碼創(chuàng)建元素時(shí)的Bug介紹
這個(gè)偏門Bug是我在更新phZoom 1.29后發(fā)現(xiàn)的, 我先將之重現(xiàn)一下2012-01-01