input、select默認字體顏色

textarea默認字顏色以及獲取焦點后的字的顏色，焦點獲取后使默認消失

<textarea cols="50" rows="5" id="textarea" onfocus="if(value=='獲取到元素焦點'){value='';document.getElementById('textarea').style.color='#000'}" onblur="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="輸入手機號">