通常登錄以後瀏覽器會詢問是否記住密碼,若是把密碼記住在瀏覽器上,下次登錄的時候瀏覽器會把用戶名和密碼自動填充到登陸頁面。工做中作項目提測後,測試提出360瀏覽器記住密碼後會自用把登錄帳號和密碼填充到添加帳號頁面和修改帳號頁面,通過本地測試後發現確實存在該問題。 相似於這樣:javascript
從用戶的角度來講 這麼整確定不行,即便是瀏覽器的問題。經過組內人員的一步一步探索最終找到解決辦法:html
一、經過網上搜索 發現有些文章是提供設置設置文本框的autocomplete屬性爲off,根據該方法修改後發現並無解決問題,原來該屬性的含義表明是否讓瀏覽器自動記錄以前輸入的值。java
二、從一篇文章上看到 「大部分瀏覽器都是根據表單域的type="password"來判斷密碼域」,也給出瞭解決辦法,「動態改變文本框」瀏覽器
因此在頁面加載時不讓它是密碼框,改爲文本框,果真密碼就匹配不上了。當該密碼框獲取焦點後改變他的type屬性 this.type="password",這種寫法能夠實現功能。但使用IE瀏覽器測試時發如今IE8及一下的瀏覽器中this.type會報錯。該方法仍是不能完全解決這個問題。ide
三、在文本框外面嵌套標籤測試
<label id="password2"><input class="txt w-200" value="" type="text" id="SecondPwd" /></label> 能夠在文本框獲取焦點以後直接改變label標籤的html $("#SecondPwd").live('focus', function () { if ($(this).attr('type') == 'text') { /*改變label標籤的html*/ $('#password2').html('<input class="txt w-200" value="" type="password" id="SecondPwd" />'); /*標籤獲取焦點*/ $('#SecondPwd').focus(); } })
這種寫法在IE8及如下瀏覽器下面均可以實現效果,但通過後期測試又發如今360急速模式下面仍然可以填充上用戶名和密碼,還得找其餘的解決辦法this
四、在使用第五種方法的以前,考慮把全部的框都先設爲只讀,而後在獲取焦點後設置成可寫,失去焦點後在只讀,但密碼框設置爲可寫以後仍會匹配上。htm
五、加載一個顯示的文本框和隱藏的密碼框blog
<label id="password1"> <input class="txt w-200 fl" value="" type="text" name="txtPwd" id="txtPwd" /> <input class="txt w-200 fl" value="" type="password" name="Pwd" id="Pwd" style="display: none" readonly="true" />//爲了防止隱藏的文本框被匹配上 先設置爲只讀 </label> 當文本框再獲取焦點以後 $("[name=txtPwd]").live('focus', function () { /*當前文本框隱藏*/ $(this).hide(); /*隱藏的密碼框顯示而且獲取焦點 只讀屬性去掉*/ $('#pwd1').show().attr('readonly', false).focus(); })
幾年前在公司寫的文章了。今天整理一下。如若遇到這類問題能夠參考第五種方法解決。小夥伴如有更好的辦法能夠評論分享ip