表單密碼自動填充hack

前言

寫前端的，最討厭的事有幾個，其中一個就是用戶/自己輸入的密碼被瀏覽器記住之後，每次打開頁面都會自動填充。甚至不分青紅皁白，每個頁面只要有password類型的輸入框，就會自動填充。尤其是chrome。

不僅煩人，有時候還會影響樣式，比如chrome下，輸入框帶有背景icon，但是自動填充會變成黃色背景，你的背景icon沒了……

怎麼辦？

解決辦法

網上有很多hack的辦法，有的用js控制輸入框類型，有的定時器清除輸入框的值，但是都不太好用。

經過研究/測試，發現了一種很簡單的hack方法，純css+html，不影響頁面佈局，不需要js，穩定，效果很棒。

CSS

.hide-input{
    width: 0;
    height: 0;
    position: absolute;
    top: -100000px;
    opacity: 0;
}

HTML

<input type="text" class="hide-input"> 
<input type="password" class="hide-input"> 
<input type="password" placeholder="請輸入密碼" />

對於chrome瀏覽器，如果頁面上有兩個以上的password類型輸入框，自動填充的時候只會填充第一個以及改輸入框的上一個，分別填充賬號和密碼。

但是前提是該password輸入框必須是可見的，不能是display: none;或者visibility: hidden;，所以，對於需要隱藏的輸入框，我們設置寬度爲0，高度爲0，透明度爲0，絕對定位，在頁面上方很高的位置，這樣的設置，既保證了該元素的可見性，又確保不會因爲意外而影響到頁面的其他元素。

結語

這樣的寫法，有些累贅。但是如果做成組件，就很方便了。
現在前端框架都是組件化的，我們完全可以把password輸入框做成一個組件，使用起來不就很方便了嗎？

希望能給你一點幫助！