プレースホルダーの改行処理 [jQuery]

プレースホルダーの改行をカジュアルに頼まれてしまい、止む無く実施した時のまとめです。

基本的にプレースホルダーで改行を行う方法は3つあります。一応CSSでも出来るのですが、全ブラウザで正常動作する書き方が思いつかなかったので割愛します。

1. htmlファイル内で改行する
2. プレースホルダー属性内に改行の文字参照を入れる
3. JavaScript(jQuery)を利用して改行コードを記述した文章を挿入する

htmlファイル内で改行する

1番お手軽なのは、1番目のhtmlファイルに直接改行を記載してしまうものです。

インデントを無視する形になるのでダサいですが、何の工夫も必要ありません。

<textarea placeholder="This is a line 
should this be a new line?"></textarea>

プレースホルダー属性内に改行の文字参照を入れる

「プレースホルダー 改行」という検索ワードで出てくる内容の多くが実体参照か文字参照「
」で記述する方法が上位を締めています。正直こだわるほどマストな仕様ではないはずなので、文字参照でやるくらいならhtmlコード内で改行してしまう方がましだと思います。

<textarea placeholder="This is a line&#13;&#10;should this be a new line?"></textarea>

JavaScript(jQuery)を利用して改行コードを記述した文章を挿入する

いずれにせよ見た目に難色があるため、jQueryで実装すると↓みたいな感じです。

$(document).ready(function(){
 $("#target_id").attr('placeholder','1行目の入力\r\n2行目の入力');
});

仕様について

以前のW3Cの仕様だと、テキストエリアのプレースホルダーは「改行文字を含まない任意の文字列が入力されるもの」と言う記載がされていたのですが、現在はWHATWGが仕様策定しているため記載から削除されました。そのため現在是非は何とも言えません。

HTML5が廃止になったタイミングで、ページのドメイン含めて丸ごとなくなっています。HTML5はW3Cが策定したもので、現行仕様のHTML Living StandardはWHATWGが策定しており、2021年1月にW3CがHTML標準として後者を推奨しました。

教訓ですが、プレースホルダーはあくまで入力例を表記する場所なのと、過去にtextareaの改行は地雷が多かったので、あまり触らないほうがいいかも知れません。

サンプル値または予想されるフォーマットの簡単な説明です。この属性を指定する場合は、U + 000A LINE FEED（LF）またはU + 000D CARRIAGE RETURN（CR）文字を含まない値を指定する必要があります。

参考:

新 https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-placeholder

すでに削除されているけど昔のURL https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-attribute