禁止瀏覽器預設填充密碼的幾種方法，親測有效
摘要：
很多瀏覽器在我們初次登入的時候都會彈框詢問是否記住密碼，如下所示：
一旦我們選擇了儲存，那麼後面每次進入網站的時候都會預設填充好密碼，如下：
如果我們不想再次登入時預設被填充密碼，有以下幾種方法
方法一：
<input type=&...
很多瀏覽器在我們初次登入的時候都會彈框詢問是否記住密碼，如下所示：
一旦我們選擇了儲存，那麼後面每次進入網站的時候都會預設填充好密碼，如下：
如果我們不想再次登入時預設被填充密碼，有以下幾種方法
方法一：
<input type="text" onfocus="this.type='password'" name="password"autocomplete="off"/>
autocomplete屬性對type為text的文字框起作用，但是在瀏覽器已經儲存了密碼的情況下，對type為password的輸入框並不起作用，所以我們需要在獲取到焦點時動態改變input的type。
缺點：有些瀏覽器體驗不好，這種方法在部分安卓手機上需要點選兩次才能彈出鍵盤
方法二：
<input type="password"name="password" autocomplete="new-password" />
缺點：這種方法chrome 支援，但是FireFox不支援
方法三：
<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 使用。
方法四：
<input type="password" name="password" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off" />
缺點：同方法一，在部分安卓手機上需要點選兩次才能彈出鍵盤，體驗不好
方法五（方法四的升級版）：
<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，輸入框便可進行再次編輯！
總結：推薦使用方法五，比較完美地解決了預設填充密碼的問題
原文作者技術部落格： https://www.jianshu.com/u/ac4daaeecdfe
95後前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這裡，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流。