一般的現代瀏覽器都有提示保存密碼功能,為的是下次再進行登錄時瀏覽器可以自動進行填充,正常情況下這種設計對使用者來說是滿個性化的
但相應的也會帶來一些麻煩,比如我是一個開發者我在登錄時記住了密碼
,但當我
在修改密碼時(此頁面有用戶名和密碼)
那么不管你真實的用戶名和密碼是什么,都會被瀏覽器自動填充的用戶和密碼覆蓋掉(
被覆蓋的用戶和密碼輸入框的背景將會變成黃色
)
這對於我們開發者來說帶來的麻煩也是不少的
<html>
<body>
<form action="">
<table>
<tr>
<td align="right">用戶名:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td>
<input type="password" name="password" id="password"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="submit" value="保存" >
<input type="button" id="cancel" value="取消" ></td>
</tr>
<input type="hidden" id="id" name="id"></table>
</form>
</body>
</html>
經過測試發現(360速度瀏覽器)在以下情況下會自動填充用戶和密碼信息:
- 在用戶和密碼包含在form的情況下,同時包含一個 type="text"和 type="password"元素且不包含readonly和disabled屬性,兩個元素可以沒有name和id屬性
- 在沒有form的情況下,同時包含一個 type="text"和 type="password"元素且不包含readonly和disabled屬性,且兩個元素至少都有name或id屬性(但name和id可以是任意值但不能是空或空格)
解決方案(僅針對360極速瀏覽器):
- 在用戶和密碼輸入框之前添加兩個無用的元素(用戶瀏覽器的默認填充),臨時的密碼元素必須跟密碼的id或name值相同
- 在用戶和密碼輸入框之前添加一個無用的password元素且該元素的id或name值跟真實的元素值相同且有disabled或readonly屬性
- 將password類型更改為其他類型(值保存到其他屬性或自定義屬性)然后通過js恢復password類型和值以跳過瀏覽器的默認填充
- 在用戶或密碼上添加disabled或readonly屬性,然后加載后通過js移出添加的屬性
參考:
