本文為joshua317原創文章,轉載請注明：轉載自joshua317博客 https://www.joshua317.com/article/63
禁止瀏覽器自動填充密碼
我們在開發的過程中，經常會遇到一個問題，設置密碼的頁面，密碼框被自動填充了密碼，這是什么原因呢？又如何解決呢？
一、原因為哪般？
這是因為我們在設置完以后，瀏覽器會彈出， “是否保存賬號密碼” 的詢問框
如果我們選擇不保存賬號密碼，也就不會出現這個問題了，但是大多數情況下，用戶都是選擇保存密碼！
那么一旦選擇了保存，那么下次再登錄這個網站時，瀏覽器就會自動幫你填充上賬號和密碼；
二、說一個場景
我們在后頭添加管理員的時候，需要輸入用戶名和密碼。一旦選擇了保存，后面不管是新增或者修改用戶密碼的時候，瀏覽器總自作主張的給你填上了帳號密碼，而且這還讓使用者很疑惑，在得知瀏覽器問題的情況下還需要手動進行刪除，所以如何解決這個問題呢
三、解決方案
1、關閉瀏覽器自身的填充功能；推薦指數：1顆星
在瀏覽器詢問的時候，選擇不保存；
缺點：任意密碼都不得進行保存。對用戶並不友好
2、在頁面進入的時候，默認表單的type值為text；推薦指數：2顆星
<input type="text" onfocus="this.type='password'" name="password" autocomplete="off"/>
autocomplete屬性對type為text的文本框起作用，但是在瀏覽器已經保存了密碼的情況下，對type為password的輸入框並不起作用，所以我們需要在獲取到焦點時動態改變input的type。 缺點：有些瀏覽器體驗不好，這種方法在部分安卓手機上需要點擊兩次才能彈出鍵盤
3、給表單的autocomplete屬性默認值;推薦指數：2顆星
<input type="password" name="password" autocomplete="new-password" />
缺點：這種方法chrome 支持，但是FireFox不支持
4、通過設置隱藏域;推薦指數：3顆星
<input type="password" style="display: none;" />
<input type="password" name="password" autocomplete="new-password" />
因為由於瀏覽器只會找到第一個 type="password" 的輸入框，並和該輸入框之前的一個配對，作為一個賬號密碼組合。寫兩個隱藏框，欺騙瀏覽器，對於用戶，可以正常使用，這種方法解決了FireFox填充密碼的問題。 缺點就是：chrome會忽略 display:none 的輸入框，仍然能找到下面的正常輸入框，所以需要用 position:absolute 之類的技巧隱藏。並且，chrome已經支持記住多個輸入框內容，所以該方法可配合new-password 使用。
5、設置表單的readonly屬性;推薦指數：4顆星
<input type="password" name="password" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off" />
缺點：同方法一，在部分安卓手機上需要點擊兩次才能彈出鍵盤，體驗不好
6、通過延時定時器；推薦指數：5顆星
<form>
<input type="text" name="name" readonly="readonly" id="name">
<input type="password" name="password" readonly="readonly" id="password">
<input type="submit" value="登錄">
</form>
<script>
setTimeout(function removeReadonly(){
var name=document.getElementById("name");
var password=document.getElementById("password");
name.removeAttribute("readonly");
password.removeAttribute("readonly");
},20);
</script>
首先先設置input為只讀readonly，當頁面加載完成后，瀏覽器不會自動填充內容，也不可以進行編輯。然后我們再用js的定時器延遲一段時間后移除input的只讀屬性readonly，輸入框便可進行再次編輯！這樣避免了用戶點擊兩次才彈出鍵盤的弊端。
四、最后
注意：
由於瀏覽器兼容性問題，使用上述方法時，要嚴格測試！！！
本文為joshua317原創文章,轉載請注明：轉載自joshua317博客 https://www.joshua317.com/article/63