資訊專欄INFORMATION COLUMN
摘要：所以，這里給設(shè)置初始為，在用戶點(diǎn)擊聚焦后設(shè)置為，避免瀏覽器在頁面之后判斷登錄表單進(jìn)行回填。
本文由 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)考慮到的是，給登錄表單的標(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
這樣設(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á)到相同效果，大家可以試一下）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53071.html
摘要：如何禁止瀏覽器自動(dòng)填充屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能方法一設(shè)置沒錯(cuò)，是可以控制瀏覽器自動(dòng)完成功能，但文檔里說可以禁止瀏覽器自動(dòng)填充，經(jīng)過實(shí)際操作一試，然而并不能，已經(jīng)失效了，經(jīng)過探索發(fā)現(xiàn)注意在像，等項(xiàng)目中應(yīng)該用駝峰命名法加到對(duì) 如何禁止瀏覽器自動(dòng)填充 autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能 方法一：設(shè)置autocomplete=new-passwo...
摘要：于是查看瀏覽器頁面行為，發(fā)現(xiàn)該表單郵箱賬號(hào)密碼字段被瀏覽器默認(rèn)填寫，導(dǎo)致反復(fù)觸發(fā)校驗(yàn)。正常觸發(fā)自動(dòng)填充解決方式既然瀏覽器遇到與的標(biāo)簽緊鄰時(shí)觸發(fā)自動(dòng)填充行為，則將兩個(gè)隔開，使用隱藏的方式欺騙瀏覽器，將密碼信息填寫在隱藏區(qū)域。經(jīng)測(cè)試問題解決。 在開發(fā)中偶然遇到的一個(gè)奇怪的問題，有一個(gè)需求會(huì)讓用戶輸入郵箱和密碼信息，該表單設(shè)置了校驗(yàn)規(guī)則（當(dāng)觸發(fā)blur時(shí)，才會(huì)觸發(fā)校驗(yàn)），但之后的測(cè)試發(fā)現(xiàn)，只...
摘要：于是查看瀏覽器頁面行為，發(fā)現(xiàn)該表單郵箱賬號(hào)密碼字段被瀏覽器默認(rèn)填寫，導(dǎo)致反復(fù)觸發(fā)校驗(yàn)。正常觸發(fā)自動(dòng)填充解決方式既然瀏覽器遇到與的標(biāo)簽緊鄰時(shí)觸發(fā)自動(dòng)填充行為，則將兩個(gè)隔開，使用隱藏的方式欺騙瀏覽器，將密碼信息填寫在隱藏區(qū)域。經(jīng)測(cè)試問題解決。 在開發(fā)中偶然遇到的一個(gè)奇怪的問題，有一個(gè)需求會(huì)讓用戶輸入郵箱和密碼信息，該表單設(shè)置了校驗(yàn)規(guī)則（當(dāng)觸發(fā)blur時(shí)，才會(huì)觸發(fā)校驗(yàn)），但之后的測(cè)試發(fā)現(xiàn)，只...
閱讀 1945·2021-11-22 14:44
閱讀 1680·2021-11-02 14:46
閱讀 3669·2021-10-13 09:40
閱讀 2606·2021-09-07 09:58
閱讀 1617·2021-09-03 10:28
閱讀 1665·2019-08-29 15:30
閱讀 984·2019-08-29 15:28
閱讀 1474·2019-08-26 12:20
