在瀏覽器中提交表單后，瀏覽器一般會(huì)提示“是否需要記住密碼”，確認(rèn)后在下次提交表單的時(shí)候會(huì)自動(dòng)填充某些輸入框。

但是在某些情景下（例如在提現(xiàn)，充值的頁面），自動(dòng)填充密碼就很不安全。需要采用一定的手段來阻止瀏覽器自動(dòng)填充。

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

使用HTML屬性 autocomplete="off"

由于自動(dòng)填充這個(gè)特性是瀏覽器自己實(shí)現(xiàn)的，autocomplete這個(gè)屬性也沒有被寫入W3C規(guī)范。很多瀏覽器都會(huì)直接忽略這個(gè)屬性。無法禁用自動(dòng)填充。

使用js在頁面加載的時(shí)候設(shè)置input的value為空
很自然能想到的一個(gè)辦法，但是瀏覽器的自動(dòng)填充居然是在js執(zhí)行完后再填充的。。。在使用js設(shè)置了input的value為空后，瀏覽器又把input自動(dòng)填充，無法解決問題。

增加<input type=”password”/>

網(wǎng)上流傳甚廣的一個(gè)方法。這個(gè)方法在大部分版本的瀏覽器上是可行的，但是在某些高版本的瀏覽器和Safari中失效。后面介紹的幾種方法都是基于這個(gè)方法的改進(jìn)。

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

增加form

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

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

最終解決方案

這個(gè)方案結(jié)合了上面兩種方法，最終連Chrome 47.0下自動(dòng)填充的問題也解決掉。

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

這個(gè)方法中需要注意的是與目標(biāo)input同輩的input不能設(shè)置成 display:none，如果設(shè)置后再Chrome 47.0上會(huì)自動(dòng)填充，因此只能使用其他手段把這個(gè)input隱藏。

Summary

使用了最后一種方案后在各個(gè)瀏覽器中運(yùn)行良好，暫時(shí)沒發(fā)現(xiàn)出現(xiàn)自動(dòng)填充的現(xiàn)象。果然前端的兼容性問題一直是一件讓人惡心的事啊。。

到此這篇關(guān)于html解決瀏覽器記住密碼輸入框的問題的文章就介紹到這了,更多相關(guān) html記住密碼輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論