解決360瀏覽器自動填充表單的問題


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






免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM