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

Posted 2021-05-11

//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="キーワードを入力">