一行代碼,阻止瀏覽器自動填充密碼

使用Chrome、Firefox,還有360和搜狗等瀏覽器,在某個網站進行提交表單的操作時,瀏覽器會提示是否保存密碼
 
  


    如果選擇了保存密碼,之後在瀏覽這個網站的任何一個有密碼輸入框的的表單時,瀏覽器會把上次保存過的賬號和密碼自動填入到表單中,輸入框的背景變成黃色
    


 
    只是登錄頁面自動填充的話倒沒有什麼問題,但是網站任何一個地方的表單都會自動填充,這就會帶來很多不必要的麻煩,比如註冊頁面;如果表單涉及到資金方面的數據提交,可能會給用戶不安全的感覺。
 
    如果你是一個前端工程師,可能會想屏蔽瀏覽器的這種自動填充的功能來減少用戶的不良體驗。網上找到的方法大多數爲js方法,要麼太繁瑣,要麼在兼容性方面存在問題。
 
    下面的方法很簡單,而且兼容任何瀏覽器,使用後大部分瀏覽器在提交表單時就不會提示你保存密碼。( 某些瀏覽器無法阻止保存密碼,但是可以阻止自動填充)。
 
    在頁面的 第一個password元素 (有些頁面會有多個password,如註冊頁面)之前加入一行代碼:
    
<input type="password" style="display: none;">
 
  原理是這樣的:
  在提交表單的時候,瀏覽器會自動檢測表單中是否有 password元素 ,如果有就提示是否保存密碼(不考慮網銀、支付寶等輸入密碼時需要安裝控件的網站);所以想要阻止瀏覽器保存密碼,只要將傳統的表單提交方式改爲ajax異步提交即可。
 
    當允許瀏覽器保存該網站的密碼之後,下次打開該網站的任何一個頁面時,瀏覽器會自動檢測該頁面是否有 password元素 ,如果有或者有多個,則自動填充對應的上次已保存的密碼,但自動填充的前提條件是:頁面中的 第一個password元素 必須要有id屬性或name屬性。如果兩種屬性都沒有則不會自動填充。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章