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

サンプルはこちら。

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

前回の「jQueryでplaceholderを表現する」を扱いやすく改良しました。

HTML

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

前回はフィールド直後の<span>タグをplaceholderとして利用していましたが、今回はそれを省きました。

代わりに「jq-placeholder」という独自属性を追加し、そこにplaceholderの内容を記入する形に変更しました。

JavaScript

$(function(){

  $(".placeholderCheck").each(function(){
    $(this).after(
      '<span class="placeholder">'+ $(this).attr("jq-placeholder") +'</span>'
    );
  });

});

placeholderの挙動をする部分は前回と同じなので、異なる冒頭部分のみ抜粋しています。

ページが表示された時点で「.placeholderCheck」に「each()」関数が実行されています。
これはページ内の全「placeholderCheck」に同じ処理を行うループ関数です。

4行目では「after()」関数が実行されています。
この関数は指定された要素の後ろにコンテンツ（HTML）を挿入する関数です。

「after()」を利用し<span>タグを生成し、その中に抜き出した「jq-placeholder」の内容を収めています。

このように独自属性を使うことでタグ1つでplaceholderを表現できるようにしました。