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

前端之家收集整理的这篇文章主要介绍了通过js修改input、select默认字体颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="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");//默认值的颜色
}
});
});
}




猜你在找的JavaScript相关文章