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