JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能
谷歌瀏覽器記住密碼輸入框顏色會(huì)改變，并且字體顏色會(huì)變成黑色，如圖
輸入框原來(lái)的樣式是這樣的
然而記住密碼后，輸入框顏色就變成了黃色，并且字體變成了黑色
這是由于谷歌瀏覽器的自帶樣式的緣故：
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è)問(wèn)題需要屏蔽瀏覽器的默認(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
如何在TypeScript中正確的遍歷一個(gè)對(duì)象
在TypeScript里面,也會(huì)遇到需要遍歷對(duì)象的時(shí)候,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-03-03
Javascript進(jìn)制轉(zhuǎn)換實(shí)例分析
這篇文章主要介紹了Javascript進(jìn)制轉(zhuǎn)換方法,實(shí)例分析了javascript實(shí)現(xiàn)進(jìn)制轉(zhuǎn)換的技巧,需要的朋友可以參考下2015-05-05
js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
這篇文章主要介紹了用js實(shí)現(xiàn)讀取文件流并下載到本地的方法,也就是我們經(jīng)常說(shuō)的使用js下載文件需要的朋友可以參考下2022-12-12
基于JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條
當(dāng)在使用流程的時(shí)候，比如有一個(gè)審核流程，有三個(gè)階段：開始，審核中，審核成功。當(dāng)在不同的階段，做相應(yīng)的進(jìn)度顯示，當(dāng)顯示時(shí)，是以動(dòng)畫的形式顯示的。下面通過(guò)代碼給大家介紹JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條，感興趣的朋友一起看看吧2018-06-06
原生JavaScript實(shí)現(xiàn)滑動(dòng)拖動(dòng)驗(yàn)證的示例代碼
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)滑動(dòng)拖動(dòng)驗(yàn)證的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了JavaScript手寫call,apply,bind方法，call，bind，apply方法都是JavaScript原生的方法，掛載在Function原型上,使得所有函數(shù)都可以調(diào)用2022-06-06
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解
uniapp是一個(gè)支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下2022-04-04
javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果
本文主要介紹了javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門和TAB選項(xiàng)卡實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門和TAB選項(xiàng)卡效果,通過(guò)簡(jiǎn)單的自定義切換函數(shù)setTab實(shí)現(xiàn)頁(yè)面元素的遍歷及屬性切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Bootstrap組件福利大放送，這篇文章主要為大家推薦了幾款好用的Bootstrap組件，感興趣的小伙伴們可以參考一下2016-07-07