Web制作メモ -トップへ-

[HTML5] プレースホルダ内で改行する方法

Web全般2015.02.12 00:43

HTML5からinput要素やtextarea要素にプレースホルダを設定できるようになりました。

プレースホルダとは、本来入る値の代わりに入れておく別の値の意味です。

プレースホルダ

プレースホルダはplaceholder属性で指定します。

inputのplaceholder属性

<input type="text" placeholder="ここに文字を入力してください">

textareaのplaceholder属性(改行コードバージョン)

<textarea placeholder="ここに文章を入力してください&#13;&#10;2行目&#13;&#10;3行目&#13;&#10;4行目&#13;&#10;5行目"></textarea>

textareaのプレースホルダでは、改行コードを入れて改行しています。

HTMLの改行コードは&#13;&#10;です。

&#13;がCR、&#10;がLF、二つ合わせてCRLFと呼ばれる改行コードです。

改行コードを使わずソース内で改行しても改行できます。

ただし、ソースコードのminifyツールによってはプレースホルダ内の改行に対応しておらず、改行が除去されてしまうので注意が必要です。

textareaのplaceholder属性(改行バージョン)

<textarea placeholder="ここに文章を入力してください
2行目
3行目
4行目
5行目"></textarea>

動作確認したところ、PC版とAndroid版のChromeやIE11では問題なく改行されます。

Android3の標準ブラウザでは改行されず1行になってしまいます。

サンプル