input、select默认字体颜色

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

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

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

<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有默认值，且为灰色，点击后默认值消失，输入值变为黑色

<script type="text/javascript">

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

             }

         });

     });

}

</ 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="输入手机号">

转载于:https://www.cnblogs.com/crizygo/p/5196240.html