js 를 통 해 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="     ">

좋은 웹페이지 즐겨찾기