プレースホルダー(placeholder)で改行したい場合
プレースホルダー(placeholder)で改行したい場合は、
いくつか方法があります。
ここではplaceholder属性に特殊文字を使う方法と、
JavaScriptでplaceholderプロパティを設定する方法の2通りを紹介します。
特殊文字を使って改行を入れる
placeholder属性の属性値に改行を表す特殊文字を入れます。 特殊文字は「 」と「 」の2つあります。
| 特殊文字 | 説明 |
|---|---|
| | 改行 |
| | 復帰 |
「 」でもいいですし、 「 」だけでも「 」だけでも機能します。
次のサンプルコードでは、 プレースホルダー(placeholder)に改行をいれて、 3行に渡ってテキストを表示しています。 改行には「 」のみを使っています。
<textarea rows="4" placeholder="テキスト1 テキスト2 テキスト3"> </textarea>
表示結果
注意：Mac環境では プレースホルダーの改行が機能しない可能性があるので確認が必要です。
JavaScriptを使う
JavaScriptを使ってplaceholderプロパティを設定する方法は、 プレースホルダー(placeholder)として入力する文字数が多い場合におすすめです。
HTMLとJavaScriptコードは次の通りです。
<textarea rows="4" id="area1"></textarea>
<script>
let e = document.getElementById("area1");
let s = `テキスト1
テキスト2
テキスト3`;
e.placeholder = s;
</script>
JavaScriptで複数行の文字列を意味する「`（バッククォート）」を使用すれば、
記述した文字列をそのままプレースホルダーに表示できます。
プレースホルダーの文字数や行数が多い場合はこちらの方がおすすめです。