textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。

placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか、と考えて調べてみた次第。

やり方を調べてみると、実体参照で改行コードを書くパターンと、実際にコード中に改行を入れるパターン、そして Webkit 系でのみ CSS を使って改行するパターンと、大きく3種類が見つかった。

実体参照で改行コードを書く

実体参照。10進数だと 
、16進数だと 
 で、CR・LF を挿入する、というやり方だ。textarea 要素内に value として書く場合は、どのブラウザでも改行されるが、placeholder 属性の値に書いた場合は、Chrome 50 と IE11 でしか有効にならなかった。

コード中に改行を入れる

<textarea placeholder="感想を
お書き
ください"></textarea>

こんな風なコードにする。

<textarea>初期値を
改行して
書く</textarea>

こうやって value として初期値を書くときに改行するのは、実体参照で書いた時と同様、どのブラウザでも改行されるが、こちらも改行が有効になるのは Chrome 50 と IE11 だけだった。

CSS で改行する

上のサイトなどで紹介されていた方法。

<textarea placeholder="First line"></textarea>

という HTML に対し、

textarea::-webkit-input-placeholder::after {
  display:block;
  content:"Second line \a Third line";
}

と書くことで、2行目以降を追加できるというもの。\a は、CSS における改行のエスケープ文字とのこと。

しかしこれを確認しているときに Chrome のバージョンを 48 から 50 にアップしたら、効かなくなってしまった。どうやら Chrome では修正されてしまった模様。同じ Webkit 系ということで、OS X における Safari 9.1 ではまだ有効だが、バージョンアップによって対応されなくなるかもしれない。

デモコードで確認

MacBook Pro を買ったこともあり、OS 間の差異も含めて現行ブラウザでの表示仕様を確認してみた。以下のデモをドウゾ。

Chrome と Firefox が Windows・Mac OS X の両 OS をサポートしていて、この2つは OS 間で表示差異がなかった。良い時代になりましたなぁ…。

Firefox はどういう方法でも改行できなかった。実現するには JavaScript で value を書き換えてやらないとダメか。

「改行できればしておきたい」程度で良いのであれば、Chrome と IE11 向けに、10進数か16進数のどちらでも良いので、実体参照で書くのが良さげか。

仕様上は改行を許容していない？

こちらで見ると、改行を許容しないように見える。

placeholder = string without line breaks

A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
Value: Any string that contains no line feed (U+000A, "LF") or carriage return (U+000D, "CR") characters.

こちらを見ると、改行を許容するように、と読み取れる。

User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other "CR" (U+000D) and "LF" (U+000A) characters in the hint, must be treated as line breaks when rendering the hint.

どれが正解なんだろう？

まぁ、テキストエリアのプレースホルダを改行したい、なんてそうないと思うので、あんまり気にしなくてもいいか。ｗ

その他参考