如何禁止瀏覽器自動填充

本文由 Deguang 發表於 碼路-技術博客

瀏覽器的保存帳戶密碼功能，給咱們帶來了很大的便利，可是在有些狀況下，咱們並不但願瀏覽器幫咱們填充一些表單，然而autocomplete的一些參數項並不能阻止瀏覽器回填，這裏咱們來看下如何解決這個問題。

問題描述：

項目註冊部分的表單有三項，分別爲手機號、驗證碼和密碼，當完成註冊操做後，瀏覽器提醒是否保存密碼，用戶名部分顯示的是驗證碼，點擊保存後，打開登陸頁面，手機號和密碼項被分別填充爲了驗證碼和密碼，給用戶帶來了必定的不便。

解決過程：

1. 第一反應考慮到的是，給登陸表單的<input>標籤，增長autocomplete="off"

MDN autocomplate 文檔

"off"

• The browser is not permitted to automatically enter or select a value for this field. It is possible that the

document or application provides its own autocomplete feature, or that security concerns require that the
field's value not be automatically entered.

• Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

在autocomplete的文檔中說明了value爲off時，瀏覽器禁止給當前字段自動的輸入或者選中一個值，但下方Note言明：在大多數現代瀏覽器中，off 值不能阻止瀏覽器的密碼管理工具自動填充，因此第一次嘗試失敗；

2. 動態設置密碼 input 標籤 type

<input type="text" onfocus="this.type='password'"></input>

這樣設置 能夠保證用戶在點擊密碼框以前，避免瀏覽器識別爲登陸表單、自動填充。

這裏多說兩句，瀏覽器是如何判斷當前表單須要 autocomplete，瀏覽器自動保存表單是當前 form 存在 type 爲 password 的input、且該 input 爲表單中的第二個 input 輸入框。

因此，這裏給 password 設置初始 type 爲 text，在用戶 點擊 input 聚焦後 設置 type 爲 password ，避免瀏覽器在 頁面 onload 以後判斷登陸表單進行回填。這樣能夠解決大部分場景下對於避免回填的須要。然而咱們的業務須要 依據跳轉連接中的 param 給用戶填充 密碼，這就致使了在用戶 主動 focus 以前，密碼會被明文展現，聚焦後又會隱藏，操做體驗不佳；

3. page.onload 後 js 控制 input type
方法同上，問題點在於 頁面load 後手動設置 input type 爲 password，然後根據 page url 參數 填充表單。

但存在問題是 瀏覽器填充的時機沒法控制，致使業務填充表單被自動填充覆蓋；方案pass；

4. autocomplete 設置 其餘參數

autocomplete 除了 on、off 以外，還有不少參數：name、email、username、new-password、current-password、street-address 等等；

當 input type 爲 password 但 autocomplete 爲 new-password， 便可解決瀏覽器自動填充問題，瀏覽器將當前輸入框識別爲新密碼，便不會自阿東填充值。（PS：有例子提到，設置 autocomplete 爲一個 任意字符串 ，也能達到相同效果，你們能夠試一下）