プレースホルダーはあくまで入力例を表記する場所なので、textarea(テキストエリア)のプレースホルダーで改行なんてしたく無いのですが、カジュアルに頼まれてしまい止む無く実施した時のまとめです。
基本的にプレースホルダーで改行を行う方法は3つあります。一応CSSでも出来るのですが、全ブラウザで正常動作する書き方が思いつかなかったので割愛します。
- JavaScript(jQuery)を利用して改行コードを記述した文章を挿入する
- プレースホルダー属性内に改行の実体参照文字を入れて置く
- htmlファイル内で改行する
1番お手軽なのは、3番目のhtmlファイルに直接改行を記載してしまうものです。
ダサいですが何の工夫も必要ありません。
1 2 |
<textarea placeholder="This is a line should this be a new line?"></textarea> |
「プレースホルダー 改行」とい検索ワードで出てくる内容の多くが実体参照「 」で記述する方法が上位を締めています。
1 |
<textarea placeholder="This is a line should this be a new line?"></textarea> |
実体参照でやるくらいならhtmlコード内で改行してしまう方がましだと思います。
いずれにせよ気持ち悪いためjQueryで実装。
1 2 3 |
$(document).ready(function(){ $("#target_id").attr('placeholder','1行目の入力だよー\r\n2行目の入力だはー'); }); |
以前のW3Cの仕様だと、「改行文字を含まない任意の文字列が入力されるもの」と言う認識が下記の様に記載されていたのですが、現在は明記するのを辞めています(笑)。
というかページのドメイン含めて丸ごとなくなっていますね、だったら色々な個所ちゃんと直せよと思うのですが…。
textareaの改行って地雷が多いので、あまり触らないほうがいいと思っています。
サンプル値または予想されるフォーマットの簡単な説明です。この属性を指定する場合は、U + 000A LINE FEED(LF)またはU + 000D CARRIAGE RETURN(CR)文字を含まない値を指定する必要があります。
参考:
昔 https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-attribute
新 https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-placeholder