如何禁止瀏覽器自動填充

jone5679 發布于2019-08-02 11:43 / 831人閱讀

摘要：所以，這里給設置初始為，在用戶點擊聚焦后設置為，避免瀏覽器在頁面之后判斷登錄表單進行回填。

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

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

問題描述：

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

解決過程：

1. 第一反應考慮到的是，給登錄表單的標簽，增加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

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

這里多說兩句，瀏覽器是如何判斷當前表單需要 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 為一個任意字符串，也能達到相同效果，大家可以試一下）

GPU云服務器云服務器自動填充自動填充php js 自動填充數據自動增加行禁止

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53071.html

禁止瀏覽器自動填充

摘要：如何禁止瀏覽器自動填充屬性規定輸入字段是否應該啟用自動完成功能方法一設置沒錯，是可以控制瀏覽器自動完成功能，但文檔里說可以禁止瀏覽器自動填充，經過實際操作一試，然而并不能，已經失效了，經過探索發現注意在像，等項目中應該用駝峰命名法加到對如何禁止瀏覽器自動填充 autocomplete 屬性規定輸入字段是否應該啟用自動完成功能方法一：設置autocomplete=new-passwo...

Jioby 2019-08-02 11:56 評論0 收藏0
禁止瀏覽器自動填充到表單

摘要：于是查看瀏覽器頁面行為，發現該表單郵箱賬號密碼字段被瀏覽器默認填寫，導致反復觸發校驗。正常觸發自動填充解決方式既然瀏覽器遇到與的標簽緊鄰時觸發自動填充行為，則將兩個隔開，使用隱藏的方式欺騙瀏覽器，將密碼信息填寫在隱藏區域。經測試問題解決。在開發中偶然遇到的一個奇怪的問題，有一個需求會讓用戶輸入郵箱和密碼信息，該表單設置了校驗規則（當觸發blur時，才會觸發校驗），但之后的測試發現，只...

chuyao 2019-08-01 18:29 評論0 收藏0
禁止瀏覽器自動填充到表單

摘要：于是查看瀏覽器頁面行為，發現該表單郵箱賬號密碼字段被瀏覽器默認填寫，導致反復觸發校驗。正常觸發自動填充解決方式既然瀏覽器遇到與的標簽緊鄰時觸發自動填充行為，則將兩個隔開，使用隱藏的方式欺騙瀏覽器，將密碼信息填寫在隱藏區域。經測試問題解決。在開發中偶然遇到的一個奇怪的問題，有一個需求會讓用戶輸入郵箱和密碼信息，該表單設置了校驗規則（當觸發blur時，才會觸發校驗），但之后的測試發現，只...

EscapedDog 2019-08-29 14:22 評論0 收藏0