本文由 Deguang 發(fā)表于 碼路-技術(shù)博客

瀏覽器的保存賬戶密碼功能，給我們帶來了很大的便利，但是在有些情況下，我們并不希望瀏覽器幫我們填充一些表單，然而autocomplete的一些參數(shù)項(xiàng)并不能阻止瀏覽器回填，這里我們來看下如何解決這個(gè)問題。

問題描述：

項(xiàng)目注冊(cè)部分的表單有三項(xiàng)，分別為手機(jī)號(hào)、驗(yàn)證碼和密碼，當(dāng)完成注冊(cè)操作后，瀏覽器提醒是否保存密碼，用戶名部分顯示的是驗(yàn)證碼，點(diǎn)擊保存后，打開登錄頁面，手機(jī)號(hào)和密碼項(xiàng)被分別填充為了驗(yàn)證碼和密碼，給用戶帶來了一定的不便。

解決過程：

1. 第一反應(yīng)考慮到的是，給登錄表單的<input>標(biāo)簽，增加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時(shí)，瀏覽器禁止給當(dāng)前字段自動(dòng)的輸入或者選中一個(gè)值，但下方Note言明：在大多數(shù)現(xiàn)代瀏覽器中，off 值不能阻止瀏覽器的密碼管理工具自動(dòng)填充，所以第一次嘗試失敗；

2. 動(dòng)態(tài)設(shè)置密碼 input 標(biāo)簽 type

<input type="text" οnfοcus="this.type='password'"></input>

這樣設(shè)置 可以保證用戶在點(diǎn)擊密碼框之前，避免瀏覽器識(shí)別為登錄表單、自動(dòng)填充。

這里多說兩句，瀏覽器是如何判斷當(dāng)前表單需要 autocomplete，瀏覽器自動(dòng)保存表單是當(dāng)前 form 存在 type 為 password 的input、且該 input 為表單中的第二個(gè) input 輸入框。

所以，這里給 password 設(shè)置初始 type 為 text，在用戶 點(diǎn)擊 input 聚焦后 設(shè)置 type 為 password ，避免瀏覽器在 頁面 onload 之后判斷登錄表單進(jìn)行回填。這樣可以解決大部分場(chǎng)景下對(duì)于避免回填的需要。然而我們的業(yè)務(wù)需要 依據(jù)跳轉(zhuǎn)鏈接中的 param 給用戶填充 密碼，這就導(dǎo)致了在用戶 主動(dòng) focus 之前，密碼會(huì)被明文展示，聚焦后又會(huì)隱藏，操作體驗(yàn)不佳；

3. page.onload 后 js 控制 input type
方法同上，問題點(diǎn)在于 頁面load 后手動(dòng)設(shè)置 input type 為 password，而后根據(jù) page url 參數(shù) 填充表單。

但存在問題是 瀏覽器填充的時(shí)機(jī)無法控制，導(dǎo)致業(yè)務(wù)填充表單被自動(dòng)填充覆蓋；方案pass；

4. autocomplete 設(shè)置 其他參數(shù)

autocomplete 除了 on、off 之外，還有很多參數(shù)：name、email、username、new-password、current-password、street-address 等等；

當(dāng) input type 為 password 但 autocomplete 為 new-password， 即可解決瀏覽器自動(dòng)填充問題，瀏覽器將當(dāng)前輸入框識(shí)別為新密碼，便不會(huì)自阿東填充值。（PS：有例子提到，設(shè)置 autocomplete 為一個(gè) 任意字符串 ，也能達(dá)到相同效果，大家可以試一下）

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9897546.html

總結(jié)

以上是生活随笔為你收集整理的如何禁止浏览器自动填充的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。