1. 程式人生 > >input框自動填充內容背景顏色為黃色解決方法

input框自動填充內容背景顏色為黃色解決方法

谷歌瀏覽器input自動填充內容,背景色會是黃色,想改的話:


HTML 程式碼1input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}
這種方法沒有了黃色背景,但是一點選input框還是會變為黃色


HTML 程式碼1  input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
這種點選框也不會出現黃色了



還有一種就是關閉自動填充autocomplete="off"
HTML 程式碼1<formaction="loginAction"method="post"autocomplete="off">2018/5/17

轉自https://www.cnblogs.com/supernovayo/p/6125509.html相容其它瀏覽器方法思路

 因為業務需求,在寫一個註冊頁面的時候,發現瀏覽器會自動填充此域名下已經儲存的賬號密碼,給使用者帶來不便。加了HTML5 中的新屬性autocomplete="off" ,但是並沒有產生效果。 反覆測試後發現瀏覽器自動填充機制是滿足:頁面裡有一個type=password的input且這個input前面有一個type=text的input。的時候就會進行自動填充。

  firefox和360瀏覽器的處理方式是:只要檢測到頁面裡有滿足填充機制的,不管是不是display:none 的,只要檢測到就直接往裡填充。而且是有幾個符合條件的就填充幾個。而chrome 54版本略有不同:滿足上面的條件且頁面裡只有一個type=password 的input。才會自動給第一個type=text 的input填充賬號,給type=password 的input填充密碼。所以chrome 54版本不存在註冊頁面自動填充的問題。 Google出來的方法是修改input的type , 頁面裡input都寫成type=text , 等獲得焦點的時候給改成type=password。下意識去搜了下IE下修改type,發現IE下type是個只讀屬性,修改type的方法並不能相容IE。(網上說的 disableautocomplete 我試了下不能阻止360就沒再用。)

  於是自己嘗試著寫了個方法,頁面裡相應的input寫成type=text,當頁面載入好後,執行一個10毫秒的定時器,remove掉這些input,重新給頁面裡新增type=password 的input 。相對應的事件都改成用on繫結。 firefox下自動填充的問題解決了,並且也相容了IE,但是。。。360瀏覽器你什麼時候新增他什麼時候就給你填充!┻━┻︵╰(‵□′)╯︵┻━┻ ,這時候發現網易郵箱的輸入框是這麼寫的 autocomplete="new-password" ,嘗試試了一下,竟然成功相容360了!然後試了下 readonly ,寫在定時器裡removeAttr 掉只讀屬性,也能阻止360瀏覽器自動填充。