ウェブ開発において、フォームの使いやすさはユーザー体験の重要な要素です。その一環として、プレースホルダーのテキストに改行を入れたいと思うことがあるかもしれません。残念ながら、HTMLの標準的なplaceholder属性では改行をサポートしていません。しかし、JavaScriptを駆使することで、プレースホルダーに改行が入ったように見せることができます。以下では、その方法を詳しく解説します。
JavaScriptを使用する
JavaScriptを使って、プレースホルダーに複数行のテキストを設定する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Multiline</title>
<style>
.multiline-placeholder {
white-space: pre-line;
}
</style>
</head>
<body>
<textarea id="multilinePlaceholder" class="multiline-placeholder"></textarea>
<script>
document.getElementById('multilinePlaceholder').setAttribute('placeholder', 'This is line 1\nThis is line 2\nThis is line 3');
</script>
</body>
</html>
textarea要素のplaceholder属性にJavaScriptを使って改行を含むテキストを設定しています。CSSのwhite-spaceプロパティをpre-lineに設定することで、改行を反映させています。
よくある質問（FAQ）
Q. JavaScriptでplaceholderに改行を入れるには？
A. HTML属性のplaceholderは改行をサポートしていません。\nを含む文字列をセットしても表示されません。複数行テキストのヒントはplaceholderの代わりにラベルや説明文として別途表示することをお勧めします。
Q. textareaのplaceholderを複数行で表示するには？
A. textareaのplaceholder属性自体は改行に対応していますが、ブラウザによって動作が異なります。HTMLで直接改行を書く（属性値内の実改行）とChrome等で複数行になる場合があります。
Q. プレースホルダーの文字色やフォントをCSSで変更するには？
A. ::placeholderセレクタでスタイルを適用できます。例：textarea::placeholder { color: #aaa; font-style: italic; }。ベンダープレフィックスなしのモダンブラウザ対応で問題ありません。
まとめ
HTMLの標準的なplaceholder属性では改行をサポートしていませんが、JavaScriptを活用することで、プレースホルダーに複数行のテキストを表示することが可能です。これにより、ユーザーによりわかりやすいフォームを提供することができます。ぜひ、これらの方法を試してみてください。