サンプルはこちら。
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」を再度表示します。