【画像付き解説】JavaScript/jQuery/CSSで実現！HTMLテキストボックスにヒントを表示する4つの方法

HTMLテキストボックスが空の場合にヒントを表示する方法

placeholder 属性は、テキストボックスが空の場合に表示されるヒントテキストを設定するために使用されます。これは、HTML5で導入された新しい属性です。

<input type="text" placeholder="名前を入力してください">

title 属性は、ツールチップを表示するために使用されます。テキストボックスが空の場合にヒントを表示するには、title 属性にヒントテキストを設定します。

<input type="text" title="名前を入力してください">

JavaScriptを使うと、より高度なヒント機能を実装することができます。例えば、以下のようなコードを使って、テキストボックスが空の場合にヒントを表示することができます。

<input type="text" id="name">

<script>
var nameInput = document.getElementById("name");

nameInput.onfocus = function() {
  if (nameInput.value === "") {
    nameInput.placeholder = "名前を入力してください";
  }
};

nameInput.onblur = function() {
  if (nameInput.value === "") {
    nameInput.placeholder = "";
  }
};
</script>

このコードは、テキストボックスにフォーカスが当たるときにヒントテキストを表示し、フォーカスが外れたときにヒントテキストを非表示にします。

<input type="text" id="name">

<script>
$(document).ready(function() {
  $("#name").placeholder("名前を入力してください");
});
</script>

このコードは、placeholder 属性を使ってヒントテキストを設定します。

ヒント

• ヒントテキストは、簡潔で分かりやすいものにしてください。
• ヒントテキストは、ユーザーが何をすべきかを明確に示すようにしてください。

HTML

<input type="text" id="name" placeholder="名前を入力してください">

JavaScript

var nameInput = document.getElementById("name");

nameInput.onfocus = function() {
  if (nameInput.value === "") {
    nameInput.placeholder = "名前を入力してください";
  }
};

nameInput.onblur = function() {
  if (nameInput.value === "") {
    nameInput.placeholder = "";
  }
};

jQuery

$(document).ready(function() {
  $("#name").placeholder("名前を入力してください");
});

HTMLテキストボックスが空の場合にヒントを表示する他の方法

<input type="text" id="name">

<style>
#name:empty {
  color: gray;
  font-style: italic;
}
</style>

このコードは、テキストボックスが空の場合に、ヒントテキストを灰色で斜体で表示します。

aria-label 属性は、スクリーンリーダーなどの補助技術で使用されるヒントテキストを設定するために使用されます。

<input type="text" id="name" aria-label="名前を入力してください">

<input type="text" id="name">

<img src="hint.png" alt="名前を入力してください" style="display: none;">

<script>
var nameInput = document.getElementById("name");
var hintImage = document.querySelector("img");

nameInput.onfocus = function() {
  hintImage.style.display = "none";
};

nameInput.onblur = function() {
  if (nameInput.value === "") {
    hintImage.style.display = "block";
  }
};
</script>