【JavaScript】placeholderに改行を入れる方法

「placeholder のヒント文を2行・3行に分けて表示したい」というニーズはよくあります。結論から言うと、<textarea> なら改行できます。逆に <input> は1行入力なので改行は表示できません。

ネット上には「placeholderは改行できない」「CSSの white-space が必要」といった誤った情報も見られます。この記事では、実際に動く正しい方法だけを解説します。

textareaなら改行できる（HTMLだけでOK）

もっとも簡単な方法です。placeholder 属性の中で、改行したい位置に改行を表すHTMLエンティティ 
（LF＝ラインフィード）を書きます。

<textarea placeholder="お名前を入力&#10;（例：山田 太郎）" rows="4"></textarea>

これだけで、プレースホルダーが2行で表示されます。JavaScriptもCSSも要りません。実際の表示は次のとおりです。

↓ 実際の表示例：

JavaScriptで動的に設定する

入力内容やページの状態に応じてプレースホルダーを切り替えたい場合は、JavaScriptで設定します。placeholder プロパティに 改行文字 \n を含む文字列を代入するだけです。

const el = document.getElementById("note");

// \n がそのまま改行として表示される
el.placeholder = "1行目のヒント\n2行目のヒント\n3行目のヒント";

inputでは改行できない（代替手段）

<input> は1行だけの入力欄なので、placeholderに 
 や \n を入れても改行されず、多くのブラウザでは空白に置き換えられるか無視されます。

複数行のヒントを出したいときは、placeholderに詰め込まず、ラベルや入力欄の下の補助テキストで補うのがアクセシビリティ的にも適切です。

<label for="zip">郵便番号</label>
<input id="zip" placeholder="例：100-0001">
<p class="hint">ハイフンありで入力してください</p>

入力欄に最初から文字を出す方法（placeholder と value の違い）は入力フォームに最初からテキストを表示する方法、入力をリアルタイムに扱う実装はフォーム入力をリアルタイムで監視する方法を参考にしてください。

placeholderの色・行間をCSSで整える

改行した複数行プレースホルダーは行間を少し広げると読みやすくなります。スタイルは ::placeholder 疑似要素で指定します。

textarea::placeholder {
  color: #999;
  font-style: italic;
  line-height: 1.6; /* 改行時の行間を調整 */
}

色・フォント・フローティングラベルなど詳しいスタイリングはplaceholderのスタイル完全ガイドにまとめています。

placeholderを説明文の代わりにしない

なお、HTMLの仕様上はplaceholderに改行を含めることは推奨されていませんが、<textarea> については主要ブラウザ（Chrome・Firefox・Edge・Safari）が改行を反映するため、実務では問題なく使えます。

よくある質問（FAQ）

まとめ

<textarea> のプレースホルダーは、HTMLなら 
、JavaScriptなら \n を入れるだけで改行できます。よく見かける「CSSの white-space が必要」という説明は誤りで、指定は不要です。

<input> は1行のため改行できないので、複数行のヒントはラベルや補助テキストで補いましょう。プレースホルダーは入力時に消えてしまう性質があるため、長い説明文の代わりにはせず、軽いヒントに留めるのが使いやすいフォームのコツです。