プレースホルダー(placeholder)で改行したい場合

プレースホルダー(placeholder)で改行したい場合は、 いくつか方法があります。
ここではplaceholder属性に特殊文字を使う方法と、 JavaScriptでplaceholderプロパティを設定する方法の2通りを紹介します。

特殊文字を使って改行を入れる

placeholder属性の属性値に改行を表す特殊文字を入れます。 特殊文字は「
」と「
」の2つあります。

特殊文字説明

改行

復帰

「
」でもいいですし、 「
」だけでも「
」だけでも機能します。

次のサンプルコードでは、 プレースホルダー(placeholder)に改行をいれて、 3行に渡ってテキストを表示しています。 改行には「
」のみを使用しています。

<textarea rows="4" 
placeholder="テキスト1&#10;テキスト2&#10;テキスト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で複数行の文字列を意味する「`(バッククォート)」を使用すれば、 文字列として記述したままにプレースホルダーに表示できるので見やすくなります。
プレースホルダーの文字数や行数が多い場合はこちらの方がおすすめです。

HTML・CSS入門