input, textareaの初期値の色を変えて表示し、フォーカスでvalueを削除する。

やりたいこと

• input タグのtextタイプに初期値を設定。
• 文字は薄い色の文字で表示をしたい。
• アクティブになると文字が消え、通常の黒文字で入力できる。
• フォーカスを解除すると、文字がなければ、デフォルト値を表示し、文字入力があれば、入力値をそのまま表示する。

設定

htmlのサンプル

<input type="text" name="keyword" id="keyword" value="hoge" />

javascriptのサンプル

$(document).ready(function(){
  var def_css   = {color : '#999999'};
  var focus_css = {color : '#000000'};
  var selector  = $('#keyword');

  //初期の色セット
  selector.css(def_css);

  //フォーカス時の色と値の変更
  selector.focus(function(){
    if($(this).val() == this.defaultValue){
      $(this).val('');
      $(this).css(focus_css);
    }
  })
  //フォーカス解除時の色と値の変更
  selector.blur(function(){
    if($(this).val() == this.defaultValue || $(this).val() == ''){
      $(this).val(this.defaultValue);
      $(this).css(def_css);
    };
  });
});

余談

実は、スクリプトを書かなくても、HTML5なら placeholder 属性を指定すると簡単にできる。

<input type="text" name="keyword" id="keyword" placeholder="hoge" />