okuden-labo
3/19/2015 - 7:54 PM

jQuery フォームにテキストを入れておき、フォーカスで消す

jQuery フォームにテキストを入れておき、フォーカスで消す

form1.html
content_copyfile_download
//javascript
$(function(){
  $(".focus").focus(function(){
    if(this.value == "キーワードを入力"){
      $(this).val("").css("color","#f39");
    }
  });
  $(".focus").blur(function(){
    if(this.value == ""){
      $(this).val("キーワードを入力").css("color","#969696");
    }
  });
});

//css
.focus {
  color: #969696;
  padding: 5px;
  width: 200px;
}

//html
<input type="text" class="focus" value="キーワードを入力">