JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能
更新時間：2017年02月13日 11:49:19 作者：路人桑
這篇文章主要介紹了JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
谷歌瀏覽器記住密碼輸入框顏色會改變，并且字體顏色會變成黑色，如圖
輸入框原來的樣式是這樣的
然而記住密碼后，輸入框顏色就變成了黃色，并且字體變成了黑色
這是由于谷歌瀏覽器的自帶樣式的緣故：
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
如果我們想記住密碼后仍然想要以前的顏色，可以用 設置input內陰影 的方式把黃色覆蓋掉，css代碼：
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
}
這樣輸入框就變成了
然而字體仍然是黑色的，如果想改變字體，則
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
-webkit-text-fill-color: #666666;//設置字體顏色
}
屏蔽谷歌瀏覽器記住表單密碼
解決谷歌瀏覽器表單記住密碼引起的各種bug，記住密碼后輸入框看似有值，但使用js表單驗證的時候卻獲取不到值，為了解決這個問題需要屏蔽瀏覽器的默認記住密碼這一共能，代碼如下：
<input id="loginname" type="text" placeholder="手機號" autocomplete="off">
<input id="passwd" type="password" placeholder="密碼" autocomplete="off">
<script>
$('#passwd').attr('type','text').focus(function(){
$(this).attr('type','password');
});
</script>
以上所述是小編給大家介紹的JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
在本篇文章中我們給大家分享了js刪除數(shù)組中的指定元素的詳實示例方法，有需要的朋友們學習下2018-10-10
這篇文章主要為大家詳細介紹了javascript正則表達式，由淺入深的幫助大家學習正則表達式，感興趣的小伙伴們可以參考一下2016-03-03
在js中有一個運算符可以幫助我們判斷一個值的類型，它就是typeof運算符。下面通過本文給大家分享JavaScript中如何判斷一個值的類型，需要的朋友參考下吧2017-09-09
通過BootStrap-select插件 js jQuery控制select屬性變化
bootstrap-select我想大家都不陌生是一個前端下拉框的插件非常好用，在select的標簽中設置屬性可以做很多功能控制，下面通過本文給大家詳細介紹下2017-01-01
下面小編就為大家?guī)硪黄钊肜斫釧jax的get和post請求。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了js兼容火狐顯示上傳圖片預覽效果的方法,涉及js調用FileReader實現(xiàn)圖片預覽功能的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了H5圖片壓縮與上傳的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本文主要介紹了webpack實現(xiàn)靜態(tài)資源緩存的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
通過本文帶領大家一起重新理解JavaScript的六種繼承方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
在網頁中，經常見到進度條效果，那么這些個性的進度條組件效果是怎么實現(xiàn)的呢，下面腳本之家小編給大家分享Bootstrap進度條組件知識詳解，感興趣的朋友要求學習吧2016-05-05