【JavaScript】プレースホルダーに改行を入れる方法

ウェブ開発において、フォームの使いやすさはユーザー体験の重要な要素です。その一環として、プレースホルダーのテキストに改行を入れたいと思うことがあるかもしれません。残念ながら、HTMLの標準的なplaceholder属性では改行をサポートしていません。しかし、JavaScriptを駆使することで、プレースホルダーに改行が入ったように見せることができます。以下では、その方法を詳しく解説します。

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に設定することで、改行を反映させています。

まとめ

HTMLの標準的なplaceholder属性では改行をサポートしていませんが、JavaScriptを活用することで、プレースホルダーに複数行のテキストを表示することが可能です。これにより、ユーザーによりわかりやすいフォームを提供することができます。ぜひ、これらの方法を試してみてください。