通過(guò)js修改input、select默認(rèn)字體顏色
更新時(shí)間：2017年04月19日 22:29:46 投稿：mdxy-dxy
這篇文章主要介紹了通過(guò)js修改input、select默認(rèn)字體顏色,需要的朋友可以參考下
textarea默認(rèn)字顏色以及獲取焦點(diǎn)后的字的顏色，焦點(diǎn)獲取后使默認(rèn)消失
<textarea cols="50" rows="5" id="textarea" onfocus="if(value=='獲取到元素焦點(diǎn)'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='元素焦點(diǎn)消失';document.getElementById('textarea').style.color='#999'}">輸入您要輸入的內(nèi)容</textarea>
select默認(rèn)選中項(xiàng)顏色為灰色，選擇后變?yōu)楹谏╦s實(shí)現(xiàn)）
<script>
var unSelected = "#999";
var selected = "#333";
$(function () {
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find('option:first').val()) {
$(this).css("color", unSelected);
} else {
$(this).css("color", selected);
}
});
})
</script>
input有默認(rèn)值，且為灰色，點(diǎn)擊后默認(rèn)值消失，輸入值變?yōu)楹谏?/p>
<script type="text/javascript">
$(function() {
//集體調(diào)用類型為text的input
$(".form input[text]").each(function(){
$(this).setDefauleValue();
});
//單個(gè)調(diào)用
$("#key").setDefauleValue();
})
//設(shè)置默認(rèn)值
$.fn.setDefauleValue = function() {
var defauleValue = $(this).val();
$(this).val(defauleValue).css("color","#eee");
return this.each(function() {
$(this).focus(function() {
if ($(this).val() == defauleValue) {
$(this).val("").css("color","#000");//輸入值的顏色
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val(defauleValue).css("color","#999");//默認(rèn)值的顏色
}
});
});
}
</script>
</head>
<body>
<form class="form">
<input type="text" size="30" value="輸入賬戶">
<br>
<input type="text" size="30" value="輸入密碼">
</form>
<br>
<br>
<br>
<input type="text" size="30" id="key" value="輸入手機(jī)號(hào)">
您可能感興趣的文章:
相關(guān)文章
JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法
這篇文章主要介紹了JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法,結(jié)合實(shí)例形式分析了javascript添加事件監(jiān)聽(tīng)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-06-06
本文主要分享了JS圖片壓縮的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
本文主要介紹了原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js 點(diǎn)擊按鈕彈出另一頁(yè)，選擇值后，返回到當(dāng)前頁(yè)
js 點(diǎn)擊按鈕彈出另一頁(yè)，選擇值后，返回到當(dāng)前頁(yè)，其實(shí)主要用于cms系統(tǒng)中，相關(guān)文章的搜索，要在已上傳目錄中選擇一些圖片等。2010-05-05
JavaScript驗(yàn)證一個(gè)url的方法總結(jié)
最近遇到幾次需要校驗(yàn)URL的,使用這篇文章小編就為大家整理了一下幾個(gè)JavaScript校驗(yàn)URL的方法,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以了解一下2023-12-12
JavaScript 監(jiān)聽(tīng)組合按鍵思路及代碼實(shí)現(xiàn)
這篇文章主要介紹了JavaScript 監(jiān)聽(tīng)組合按鍵思路及代碼實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript實(shí)現(xiàn)時(shí)間格式的切割與轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)時(shí)間格式的切割與轉(zhuǎn)換的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-04-04
本篇文章主要介紹了javascript將url解析為json格式的兩種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要介紹了js中定時(shí)器的使用方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01