【JS】【29】解決瀏覽器自動填充密碼輸入框的問題

前言：該文章僅為記錄方法，原博寫得很好，可直接查看原博。我在實際項目中覺得比較麻煩，直接自動填充就自動填充算了，並未做處理

正文：

1，使用HTML屬性（autocomplete="off"）

<input type="password" autocomplete="off"/>

由於自動填充這個特性是瀏覽器自己實現的，autocomplete這個屬性也沒有被寫入W3C規范。很多瀏覽器都會直接忽略這個屬性。無法禁用自動填充。

2，使用js在頁面加載的時候設置input的value為空

瀏覽器的自動填充居然是在js執行完后再填充的。在使用js設置了input的value為空后，瀏覽器又把input自動填充，無法解決問題。

3，額外增加<input type="password" style="display:none" />

<!-- 額外增加的input -->
<input type="password" style="display:none"/>
<!-- 原先的input -->
<input type="password"/>

網上流傳甚廣的一個方法。這個方法在大部分版本的瀏覽器上是可行的，但是在某些高版本的瀏覽器和Safari中失效。后面介紹的幾種方法都是基於這個方法的改進。

4，增加form

<!-- 額外增加的form和input -->
<form style="display:none">
  <input type="password"/>
</form>
<!-- 原先的input -->
<input type="password"/>

這個方法較上面那個解決了Safari下自動填充的問題。但是在某些高版本Chrome下失效。（經測試Chrome 46.0可行，Chrome 47.0失效）

5，最終解決方案

<!-- 額外增加的內容 -->
<form style="display:none">
  <input type="password"/>
</form>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- 原先的input -->
<input type="password"/>

這個方案結合了上面兩種方法，最終連Chrome 47.0下自動填充的問題也解決掉。

這個方法中需要注意的是與目標input同輩的input不能設置成 display:none，如果設置后再Chrome 47.0上會自動填充，因此只能使用其他手段把這個input隱藏。

6，其他博客的方案

（1）把input type="password" 改成 input type="text" 並在后面加上 onfocus="this.type='password'"

<input type="text" onfocus="this.type='password'" />

（2）在文檔加載完成后將密碼輸入框設置為空

window.load = function(){ 
    document.getElementById('密碼域ID').value=''; 
}; 

（3）在用戶名和密碼之間加上一個隱藏的文本框

<input type="text" name="name">
<input type="hidden">
<input type="password" name="pass">

注：我當時寫的時候（1）（2）是有效的，但可能也存在兼容問題

參考博客：

解決瀏覽器記住密碼輸入框的問題 - imdennisleung的專欄 - CSDN博客
https://blog.csdn.net/imdennisleung/article/details/51220387 

阻止瀏覽器記住密碼功能干擾表單填充 - 每天都記錄一點點！ - CSDN博客
https://blog.csdn.net/playboyanta123/article/details/43795643