HTML禁止自動填充input表單的解決方案

項目提測中出現問題: 用戶名密碼自動保存用戶名密碼之后,回顯在項目中別的位置(有密碼框,但是沒有用戶名的地方), 不想讓自動顯示出來, 需要兼容谷歌, 火狐, IE, 試用了好多方法均不可滿足條件,

最后終於找到解決辦法，廢話不多說，直接上代碼！

 

<form method="post" action="">
　　<input type="text" name="username" readonly="readonly" id="username">
　　<input type="password" name="password" readonly="readonly" id="password">
　　<input type="submit" value="登錄">
</form>
<script>
　　setTimeout(function removeReadonly(){
　　　　var username=document.getElementById("username");
　　　　var password=document.getElementById("password");
　　　　username.removeAttribute("readonly");
　　　　password.removeAttribute("readonly");
　　},1000);
</script>

 

思路：首先設置input為只讀readonly，當頁面加載完成后，瀏覽器不會自動填充內容，但是也不可以進行編輯。然后我們再用js的定時器延遲一段時間后移除input的只讀屬性readonly，輸入框便可進行再次編輯！完美解決！

原文鏈接：https://blog.csdn.net/u012800952/article/details/80654649

 

使用以上方法, 是成功阻止了回顯問題, 但是經過測試又發現了另一個問題: 頁面會出現記住密碼的彈窗,顯然這樣是不對的, 沒法去控制用戶的行為, 對此bug經過研究,最終切換思路,不阻止自動填充, 讓其正常填充, 代碼如下:

<div style="opacity:0;">

　　<input type="text" name="username">
　　<input type="password" name="password">

</div>

最后優化頁面樣式, 最終完美解決!