【jQuery】textareaの複数行プレースホルダー

HTML/CSS JavaScript jQuery

<textarea>のプレースホルダーに、やたら長い改行あり文章を使いたくなってしまった時。
プレースホルダーを複数行にする方法はあるようだが、

textarea 要素内の placeholder 属性で改行するには
http://neos21.hatenablog.com/entry/2016/05/11/002151

メンテンナンス性が悪いし、ブラウザ依存が面倒だし、ぶっちゃけ使えない。
普通の<div>タグとJavaScriptで似たような挙動にした方がマシな気がするので作ってみた。

▼デモ

このプレースホルダーは
普通の<div>タグなので
好きなCSSを使えて
複数行にわたる内容や
画像も入れられます

実装方法

▼<textarea>のすぐ次に<div class=”placeholder”></div>を追加

<textarea></textarea>
<div class="placeholder"></div>

▼jQuery読み込み後に以下のJavaScriptを実行

▼DOM Ready後に処理開始

$('textarea + .placeholder').textareaPlaceholder();

▼<textarea>の場所が変わった時は以下実行

$('textarea + .placeholder').trigger('resized');

※クラス名 placeholder は任意に変更可能