【保存版】HTML5 textarea placeholderの表示方法：5つの方法とサンプルコード

2024-05-23

HTML5 textarea placeholder が表示されない場合の解決策

原因

placeholder テキストが表示されない主な原因は次のとおりです。

<textarea> タグの開始タグと終了タグの間に空白や改行がある

<textarea> タグの開始タグと終了タグは同じ行に記述する必要があります。間に空白や改行があると、ブラウザはそれをテキストエリアの内容と解釈し、placeholder テキストが表示されなくなります。

解決策

以下の方法で解決できます。

<textarea placeholder="コメントを入力してください"></textarea>

JavaScript で placeholder テキストを設定する

<textarea id="myTextarea"></textarea>

<script>
  document.getElementById('myTextarea').placeholder = 'コメントを入力してください';
</script>

上記以外にも、以下の原因で placeholder テキストが表示されない場合があります。

CSS で placeholder テキストを非表示にしている

CSS で ::placeholder 擬似要素をターゲットにして、display: none; を設定すると、placeholder テキストが表示されなくなります。

ブラウザのバグ

稀に、ブラウザのバグが原因で placeholder テキストが表示されない場合があります。その場合は、ブラウザを最新バージョンに更新するか、別のブラウザを使用してみてください。

$(document).ready(function() {
  $('#myTextarea').attr('placeholder', 'コメントを入力してください');
});

フォームの場合、placeholder テキストはユーザーが入力する前に表示されます。ユーザーが入力すると、placeholder テキストは非表示になります。

HTML

以下の HTML コードは、placeholder テキストを含むフォームの例です。

<form>
  <label for="name">名前：</label>
  <input type="text" id="name" placeholder="あなたの名前を入力してください">

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" placeholder="あなたのメールアドレスを入力してください">

  <label for="message">メッセージ：</label>
  <textarea id="message" placeholder="メッセージを入力してください"></textarea>

  <button type="submit">送信</button>
</form>

この情報は、情報提供のみを目的としており、専門的なアドバイスを構成するものではありません。特定の状況については、専門家に相談することをお勧めします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML5 textarea placeholder</title>
</head>
<body>
  <textarea id="myTextarea" placeholder="コメントを入力してください"></textarea>

  <script>
    document.getElementById('myTextarea').placeholder = 'コメントを入力してください';
  </script>
</body>
</html>

説明

このコードは、HTML5 の <textarea> タグを使用して、placeholder テキストを設定する例です。

<textarea> タグには、id="myTextarea" 属性と placeholder="コメントを入力してください" 属性が設定されています。
id="myTextarea" 属性は、JavaScript で要素を参照するために使用されます。
placeholder="コメントを入力してください" 属性は、テキストエリアが空の場合に表示されるヒントテキストを設定します。
JavaScript コードは、document.getElementById('myTextarea').placeholder プロパティを使用して、placeholder テキストを設定します。

実行方法

このコードを実行するには、以下の手順を実行します。

上記のコードを index.html などのファイルに保存します。
Web ブラウザで index.html ファイルを開きます。

結果

ブラウザが開くと、コメントを入力してください という placeholder テキストがテキストエリアに表示されます。ユーザーがテキストエリアに何かを入力すると、placeholder テキストは非表示になります。

jQuery を使用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML5 textarea placeholder</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <textarea id="myTextarea"></textarea>

  <script>
    $(document).ready(function() {
      $('#myTextarea').attr('placeholder', 'コメントを入力してください');
    });
  </script>
</body>
</html>

<script> タグは、jQuery ライブラリの https://code.jquery.com/jquery-3.6.0.min.js ファイルをロードします。
JavaScript コードは、$(document).ready(function(){}) 関数を使用して、DOM が読み込まれた後に実行されるコードを定義します。
関数内では、$('#myTextarea').attr('placeholder', 'コメントを入力してください') メソッドを使用して、placeholder テキストを設定します。

jquery-3.6.0.min.js ファイルをダウンロードして、同じディレクトリに保存します。

textarea::-webkit-placeholder {
  color: #ccc;
  font-size: 14px;
}

textarea:-moz-placeholder {
  color: #ccc;
  font-size: 14px;
}

textarea::-ms-placeholder {
  color: #ccc;
  font-size: 14px;
}

textarea::placeholder {
  color: #ccc;
  font-size: 14px;
}

textarea::-webkit-placeholder セレクタは、Webkit ブラウザ (Chrome、Safari など) の placeholder テキストをターゲットにします。
`color

HTML5 textarea placeholder を表示するその他の方法

例

<textarea placeholder="コメントを入力してください"></textarea>

<textarea id="myTextarea"></textarea>

<script>
  document.getElementById('myTextarea').placeholder = 'コメントを入力してください';
</script>

textarea::placeholder {
  display: none;
}

<textarea id="myTextarea"></textarea>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  $(document).ready(function() {
    $('#myTextarea').attr('placeholder', 'コメントを入力してください');
  });
</script>