一般登陸之后瀏覽器會詢問是否記住密碼,如果把密碼記住在瀏覽器上,下次登陸的時候瀏覽器會把用戶名和密碼自動填充到登錄頁面。前段時間服務站平台的員工賬號模塊提測后,測試提出360瀏覽器記住密碼后會自用把登陸賬號和密碼填充到添加賬號頁面和修改賬號頁面(部分其他瀏覽器也會有該問題),經過本地測試后發現確實存在該問題。 類似於這樣:
從用戶的角度來說 這么整肯定不行,即使是瀏覽器的問題。通過組內人員的一步一步探索最終找到解決辦法:
1. 通過網上搜索 發現有些文章是提供設置設置文本框的autocomplete屬性為off,根據該方法修改后發現並沒有解決問題,原來該屬性的含義代表是否讓瀏覽器自動記錄之前輸入的值。
2. 從一篇文章上看到 “大部分瀏覽器都是根據表單域的type="password"來判斷密碼域”,也給出了解決辦法,“動態改變文本框”。
在頁面加載時不讓它是密碼框,改成文本框,果然密碼就匹配不上了。當該密碼框獲取焦點后改變他的type屬性 this.type="password",這種寫法可以實現功能。但使用IE瀏覽器測試時發現在IE8及一下的瀏覽器中this.type會報錯。該方法還是不能徹底解決這個問題。
3. 在文本框外面嵌套標簽
<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急速模式下面仍然能夠填充上用戶名和密碼,還得找其他的解決辦法
4. 在使用第五種方法的之前,考慮把所有的框都先設為只讀,然后在獲取焦點后設置成可寫,失去焦點后在只讀,但密碼框設置為可寫之后仍會匹配上。
5. 加載一個顯示的文本框和隱藏的密碼框
<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(); })
如果大家也遇到這種問題可以參考一下這種方法,或者誰有更好的方法可以分享一下。