html option 字体颜色,通过js修改input、select默认字体颜色

textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失

获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" οnblur="if (value ==''){value='元素焦点消失';document.getElementById('textarea').style.color='#999'}">输入您要输入的内容

select默认选中项颜色为灰色，选择后变为黑色(js实现)

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);

}

});

})

input有默认值，且为灰色，点击后默认值消失，输入值变为黑色

$(function() {

//集体调用类型为text的input

$(".form input[text]").each(function(){

$(this).setDefauleValue();

});

//单个调用

$("#key").setDefauleValue();

})

//设置默认值

$.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");//默认值的颜色

}

});

});

}

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。