【全網羅】HTML textarea要素のプレースホルダ：改行、スタイル、JavaScriptまで徹底解説

2024-06-24

HTML textarea要素のプレースホルダ属性に改行を挿入する方法

通常、placeholder属性には1行のテキストしか設定できませんが、改行コードを使用することで、複数行のプレースホルダを作成することも可能です。ただし、改行の表示方法はブラウザによって異なる場合があります。

改行コードを使用する方法

最も簡単な方法は、改行コードを直接placeholder属性に挿入する方法です。改行コードとして、以下のいずれかを使用できます。

Windows形式の改行コード (\r\n)
UNIX形式の改行コード (\n)
HTMLエンティティ (
)

例：

<textarea placeholder="1行目のテキスト&#13;&#10;2行目のテキスト"></textarea>

この方法では、すべてのブラウザで改行が挿入されますが、改行コードがそのまま表示されてしまうという問題があります。

CSSを使用する方法

CSSを使用して、placeholder要素のスタイルを調整することで、改行を挿入することができます。この方法では、改行コードが表示されることなく、ブラウザ間で統一した表示を実現することができます。

textarea::-webkit-placeholder {
  white-space: break-lines;
}

textarea:-moz-placeholder {
  white-space: break-lines;
}

textarea::-ms-placeholder {
  white-space: break-lines;
}

このCSSコードは、Chrome、Firefox、Internet Explorerなどの主要なブラウザで動作します。ただし、Safariなどの古いブラウザでは動作しない場合があります。

JavaScriptを使用して、placeholder要素のテキストを動的に変更することで、改行を挿入することができます。この方法では、ブラウザごとに異なる挙動を個別に処理することができますが、やや複雑なコーディングが必要となります。

const textarea = document.querySelector('textarea');

textarea.placeholder = '1行目のテキスト\n2行目のテキスト';

このJavaScriptコードは、改行コードを\nに置き換えていますが、必要に応じて他の改行コードを使用することもできます。

注意点

いずれの方法を使用する場合も、古いブラウザではプレースホルダの改行が正しく表示されない可能性があります。
改行を挿入する場合は、ユーザーが入力したテキストと区別できるように、プレースホルダのスタイルを調整することをおすすめします。

HTML textarea要素のプレースホルダ属性に改行を挿入するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea Placeholder with Line Breaks</title>
  <style>
    textarea::-webkit-placeholder {
      white-space: break-lines;
    }

    textarea:-moz-placeholder {
      white-space: break-lines;
    }

    textarea::-ms-placeholder {
      white-space: break-lines;
    }
  </style>
</head>
<body>
  <textarea placeholder="1行目のテキスト\n2行目のテキスト\n3行目のテキスト"></textarea>

  <script>
    const textarea = document.querySelector('textarea');

    // JavaScriptによる改行挿入（オプション）
    // textarea.placeholder = '1行目のテキスト\n2行目のテキスト\n3行目のテキスト';
  </script>
</body>
</html>

説明

このコード例では、以下の方法でtextarea要素のプレースホルダ属性に改行を挿入しています。

CSS: white-space: break-lines; プロパティを使用して、改行を挿入します。これは、主要なブラウザで動作します。
JavaScript: (オプション) placeholder 属性に直接改行コードを挿入します。これは、すべてのブラウザで動作しますが、改行コードが表示されてしまいます。

上記のコードを参考に、ご自身のニーズに合わせて調整してください。

補足

改行コードは、Windows形式 (\r\n)、UNIX形式 (\n)、HTMLエンティティ (
) のいずれを使用しても構いません。
placeholder属性のテキストは、必要に応じて変更してください。
CSSは、必要に応じて他のスタイルを追加することができます。

HTML textarea要素のプレースホルダ属性に改行を挿入するその他の方法

一部のブラウザでは、特殊文字を使用して改行を挿入することができます。この方法は、CSSやJavaScriptを使用するよりも簡潔ですが、ブラウザ間の互換性が低いという欠点があります。

<textarea placeholder="1行目のテキスト\u20282行目のテキスト"></textarea>

この例では、\u2028 という特殊文字を使用して改行を挿入しています。この特殊文字は、Windows形式の改行コード (\r\n) をUnicode表現したものです。

プレースホルダの代わりに、ラベルを使用して入力欄の説明を表示するという方法もあります。ラベルは、textarea要素の外側に配置し、for 属性を使用して関連付けることができます。

<label for="textarea">1行目のテキスト</label>
<textarea id="textarea"></textarea>

<label for="textarea2">2行目のテキスト</label>
<textarea id="textarea2"></textarea>

この方法では、改行を挿入する必要がなく、よりアクセシビリティの高いデザインを作成することができます。

各方法の比較

方法	利点	欠点
改行コードを使用する	簡単	ブラウザによって表示が異なる
CSSを使用する	ブラウザ間で統一した表示が可能	古いブラウザでは動作しない場合がある
JavaScriptを使用する	柔軟性が高い	やや複雑なコーディングが必要
特殊文字を使用する	簡潔	ブラウザ間の互換性が低い
ラベルを使用する	アクセシビリティが高い	プレースホルダが使用できない