解決Chrome上的表單自動填充無法禁用(autocomplete="off"屬性失效)
阿新 • • 發佈:2018-12-30
在Chrome上發現了一個Bug,表單會出現框子變黃,並且一直有自動補全的現象,新增 autocomplete="off" 屬性也解決不了問題,如下圖:
在後臺登入和登錄檔單裡,不需要自動補全,不僅會誤導使用者還會導致安全性的問題,百度了一通,發現這居然是Chrome這個強大的瀏覽器的歷史遺留Bug,至今沒有解決,所以手動找到了解決辦法,步驟如下:
1、去除黃色框樣式,新增css樣式
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }
2、在不需要自動補全下拉框的地方加入 autocomplete='new-password'
<div class="form-group"> <input type="text" class="form-control" name="usr_sno" placeholder="賬號" required autocomplete="new-password"> </div> <div class="form-group help"> <input type="text" class="form-control" flag="password" name="usr_password" placeholder="密碼" required autocomplete='new-password'> </div>
根據Chromium社群的說法, autocomplete='new-password' 屬性可以禁用補全。
3、禁用密碼輸入框的自動補全
雖然autocomplete='new-password' 屬性可以禁用補全,但實測只有type='text'下有用。而密碼輸入框改成type='text密碼會明文顯示,改成type='password'又會導致自動補全下拉框。於是想到在密碼錶單新增自定義屬性flag="password",然後加上這段jQuery程式碼即可。
原理就是密碼輸入框預設為type = text,等使用者開始輸入時,觸發函式改成password,這樣用感覺不到變化,密碼又不會明文顯示。
$(function () {
//解決Chrome上出現的密碼自動補全(propertychange屬性相容IE)
$("[flag='password']").bind('input propertychange', function(e) {
//取消事件的預設動作
e.preventDefault();
$(this).attr("type","password");
});
});
參考資料:
獨裁的Google , :)