通過(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)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索歷史功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
JS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹(shù)形結(jié)構(gòu)中查找對(duì)象
這篇文章介紹了JS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹(shù)形結(jié)構(gòu)中查找對(duì)象的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
鼠標(biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對(duì)之修改與隱藏實(shí)例
下面小編就為大家?guī)?lái)一篇鼠標(biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對(duì)之修改與隱藏實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-12-12
JS實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播案例
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
本文主要介紹js仿拉勾網(wǎng)首頁(yè)穿墻廣告效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jsp網(wǎng)頁(yè)搜索結(jié)果中實(shí)現(xiàn)選中一行使其高亮
在做搜索結(jié)果時(shí)為了好看需要將選中的行變的高亮些，下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-02-02
escape()、encodeURI()、encodeURIComponent()三種方法都能對(duì)一些影響URL完整性的特殊字符進(jìn)行過(guò)濾。2010-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了JS對(duì)象創(chuàng)建的幾種方式，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類的時(shí)候，不需要手動(dòng)去寫(xiě)require來(lái)導(dǎo)入這個(gè)class.php文件，程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來(lái)這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12