JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストボックスをクリックした瞬間に入力ヒントを消す方法（onfocus/onblur活用）

テキストボックスに最初から表示されている入力ヒント（デフォルト値）は、onfocus と onblur の仕組みを使うことで、マウスカーソルでクリックした瞬間に消すことができます。

まず、次のような入力用テキストボックスを用意します。

<label for="name">StudentName:
<input name="name" id="studentName" value="Enter your Name ????">
</label>

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="name">StudentName:
<input name="name" id="studentName" value="Enter your Name ????">
</label>
<script>
   function guessFocus() {
      if (this.value == this.defaultValue)
         this.value = '';
   }
   function guessBlur() {
      if (this.value == '')
         this.value = this.defaultValue;
   }
   var input = document.getElementById('studentName');
   input.onfocus = guessFocus;
   input.onblur = guessBlur;
</script>
</body>
</html>

コードの解説

  • guessFocus()：テキストボックスがフォーカスされたときに呼び出される関数です。現在の値が初期値（defaultValue）と同じ場合、つまりユーザーがまだ何も入力していないときは、値を空文字列に置き換えてヒントを消します。
  • guessBlur()：フォーカスが外れたときに呼び出される関数です。テキストボックスが空のままだった場合は、元のヒント（defaultValue）を再表示します。
  • onfocus / onblur：getElementById で取得した input 要素に対して、それぞれの関数をイベントハンドラとして登録しています。

実行方法

上記のプログラムを実行するには、「index.html」などの名前でファイルを保存します。VS Code を使用している場合は、ファイルを右クリックして「Open with Live Server」を選択するとブラウザで確認できます。

実行結果

プログラムを実行すると、次のように初期状態のテキストボックスが表示されます。

JavaScriptでテキストボックスをクリックした瞬間に入力ヒントを消す方法（onfocus/onblur活用）

テキストボックス内をクリックするとフォーカスが当たり、入力ヒントが消えてすぐに文字を入力できる状態になります。その様子は以下のスクリーンショットの通りです。

JavaScriptでテキストボックスをクリックした瞬間に入力ヒントを消す方法（onfocus/onblur活用）

補足：placeholder属性との違い

HTML5 以降では、<input type="text" placeholder="お名前を入力してください"> のように placeholder 属性を使うことで、同様の挙動をより簡単に実現できます。ただし、本記事で紹介した defaultValue を利用する方法は、古いブラウザ環境でも動作する点や、JavaScript 側からヒントの表示・非表示を柔軟に制御できる点で有用です。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでEnterキー押下時にテキストボックスの内容を送信する方法

    Enterキーのキーコードは「13」です。JavaScriptでは、event.keyCode を使ってEnterキーが押されたかどうかを判定できます。キーボードイベント（keydown）をリスナーで監視し、keyCodeが13であればフォーム送信などの処理を実行する仕組みです。 以下に、テキストボックスでEnterキーが押されたときに送信処理を呼び出すサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&quo

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal