html解決瀏覽器記住密碼輸入框的問題

在瀏覽器中提交表單後，瀏覽器一般會提示“是否需要記住密碼”，確認後下次提交表單的時候會自動填入某些輸入框。

但是在某些情境下（例如在提現，儲值的頁面），自動填入密碼就很不安全。需要採用一定的手段來阻止瀏覽器自動填入。

在解決的過程中遇到了一些坑，這裡做一下筆記：

使用HTML屬性autocomplete="off"

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

使用js在頁面載入的時候設定input的value為空很自然能想到的一個辦法，但是瀏覽器的自動填充居然是在js執行完後再填充的。 。 。使用js設定了input的value為空後，瀏覽器又把input自動填充，無法解決問題。

增加<input type=”password”/>

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

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

增加form

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

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

最終解決方案

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

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

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

Summary

使用了最後一種方案後在各個瀏覽器中運作良好，暫時沒發現出現自動填入的現象。果然前端的兼容性問題一直是讓人噁心的事啊。 。

到此這篇關於html解決瀏覽器記住密碼輸入框的問題的文章就介紹到這了,更多相關html記住密碼輸入框內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！