jQueryでplaceholder（フィールドの初期値）を表現する

サンプルはこちら。

See the Pen neiGb by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

IE9以前では対応しておらず、また現在でもブラウザごとに微妙に表示に差のあるplaceholder表示を、jQueryを使い統一した表現にします。

HTML

<form>
  <textarea class="placeholderCheck"></textarea>
  <span class="placeholder">入力してください。</span>
</form>

サンプルはtextareaとinput:textの両方を使っていますが、いずれも同じクラスを利用しているので片方だけ抜粋しています。

「.placeholder」は必ず対になる入力フィールドの直後に記入する形で汎用性を持たせています。

JavaScript

$(function(){

  //フォーカス時にplaceholderを消す
  $(".placeholderCheck").focus(function(){
    $(this).next(".placeholder").hide();
  });

  //placeholderクリック時にフォーカス
  $(".placeholder").click(function(){
    $(this).prev(".placeholderCheck").focus();
  });

  //フォーカスが外れた時、空ならばplaceholderを表示
  $(".placeholderCheck").blur(function(){
    if($(this).val() == "") {
      $(this).next(".placeholder").show();
    }
  });

});

以下3つのイベントごとの処理を記述しています。

1. 入力フィールドにフォーカスした時

「.placeholderCheck」のついたフィールドがフォーカスされた時、その直後にある「.placeholder」を消しています。

2. placeholderの<span>がクリックされた時

「.placeholder」のついた要素がクリックされた時、その直前にある「.placeholderCheck」をフォーカスしています。そのため必然的に上記1の処理も実行され「.placeholder」自身も消されます。

3. 入力フィールドのフォーカスが外れた時

「.placeholderCheck」からフォーカスが外れた時、その中身が空かどうかを判定します。
空であれば「.placeholder」を再度表示します。