表單密碼自動填充hack

Little_XM 發(fā)布于2019-08-30 15:55 / 1437人閱讀

摘要：甚至不分青紅皂白，每個頁面只要有類型的輸入框，就會自動填充。請輸入密碼對于瀏覽器，如果頁面上有兩個以上的類型輸入框，自動填充的時候只會填充第一個以及改輸入框的上一個，分別填充賬號和密碼。

前言

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

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

怎么辦？

解決辦法

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

經(jīng)過研究/測試，發(fā)現(xiàn)了一種很簡單的hack方法，純css+html，不影響頁面布局，不需要js，穩(wěn)定，效果很棒。

CSS

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

HTML

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

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

結(jié)語

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

希望能給你一點幫助！