解決瀏覽器保存密碼自動填充問題

解決瀏覽器保存密碼自動填充問題

問題描述

話說有一天，我如往常同樣打開個人開發網站進行登陸操做。瀏覽器很日常的在咱們進行登陸操做以後詢問我是否須要記住密碼，懶惰如我點擊了記住密碼。一切都很正常的進行着，沒有什麼異常發生。然而，問題就出現了。當我打開一個新建用戶的操做，裏面的輸入框自動將個人用戶名和密碼默認填寫進去了，而後觸發了內置的校驗規則

在我確認過在打開編輯框的時候已經輸入框的數據重置以後，開始了個人排查錯位之旅。從cookie，本地緩存等等，都沒有發現相關的問題。後來發現是瀏覽器存在自動填充機制的問題。

瀏覽器自動填充機制

通過個人反覆測試，以Chrome爲例，當瀏覽器遇到type="text"與type="password"的<input/>標籤緊鄰時，會觸發瀏覽器自動填充行爲。默認爲黃色背景。firefox和360瀏覽器的處理方式是：只要檢測到頁面裏有知足填充機制的，無論是否是display：none 的，只要檢測到就直接往裏填充。

解決方案

1. 設置瀏覽器不提示記住密碼,記住密碼的網站都在設置裏能夠看到，而且能夠去除(很明顯，這個方法治標不治本，我就想記住密碼還不行嗎？)

1. 使用HTML5新屬性autocomplete="off" 但禁用自動填充。這個屬性好像是firefox發起的，並非標準屬性，因此這塊主要是針對ie和獲取瀏覽器生效。谷歌不認可這個屬性。因此在谷歌瀏覽器上並無產生任何效果
2. 既然瀏覽器遇到type="text"與type="password"的<input/>標籤緊鄰時觸發自動填充行爲，則將兩個<input/>隔開，使用隱藏的方式「欺騙」瀏覽器，將密碼信息填寫在隱藏區域。

.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

/*讓input看不見，而不是直接display: none，若是直接display: none，有些瀏覽器則不生效，好比谷歌*/
 
<input  type="text"  class="is-hidden" />
<input  type="password"  class="is-hidden" />

1. 修改readonly屬性

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

將表單輸入設爲可讀模式，瀏覽器自動填充就失效了，在焦點在該表單輸入的時候再將可讀屬性移除。該方法親試簡潔好用

總結

在以上介紹的方法並非所有的解決方法，目前我用的是第四個方法比較多，雖然第三個方法也挺好用，可是多增長標籤的類型不符合個人做風，仍是默默的用了第四種方法。歡迎你們補充更多的一些方法，未完待續！

做者簡介：張敏，蘆葦科技web前端開發工程師，低調冷幽默，深藏不露。表明做品：微魚娃娃機系統、TopShow活動報名小程序。擅長網站建設、微信公衆號開發、微信小程序開發、小遊戲製做、企業微信製做、H5建設，專一於前端框架、交互設計、圖像繪製、數據分析等研究。

歡迎和咱們一塊兒並肩做戰： web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多

提供專業的微信公衆號外包，靠譜的釘釘開發，深圳企業微信建設，高質量的微信小程序開發，廣東小遊戲開發，東莞H5製做