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