表單密碼自動填充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輸入框作成一個組件，使用起來不就很方便了嗎？

但願能給你一點幫助！