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

HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。

onfocus属性とは

onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。

主な活用シーンとしては、以下のようなものが挙げられます。

  • 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する
  • 入力欄のプレースホルダーやヒントテキストを表示する
  • バリデーションメッセージやガイダンスを動的に切り替える

実装例

次のコードは、onfocus属性を使って、入力欄がフォーカスされたときにその背景色を青色に変更する例です。

<!DOCTYPE html>
<html>
   <body>
      <p>科目名を入力してください</p>
      科目： <input type = "text" id = "sname" onfocus = "display(this.id)">
      <br>

      <script>
         function display(val) {
            document.getElementById(val).style.background = "blue";
         }
      </script>
   </body>
</html>

コードの解説

このコードの動作は以下の通りです。

  1. <input>要素にonfocus="display(this.id)"が設定されており、この要素がフォーカスされるとdisplay()関数が呼び出されます。
  2. this.idにより、フォーカスされた要素自身のID（この場合は「sname」）が引数として渡されます。
  3. display()関数内では、document.getElementById()で対象の要素を取得し、style.backgroundプロパティに「blue」を設定することで背景色を変更しています。

実際にブラウザでこのページを開き、入力欄をクリックしてみてください。入力欄がフォーカスされた瞬間に背景が青色に変わるのが確認できます。

補足ポイント

onfocus属性はインラインで記述できますが、より保守性の高いコードにするためには、addEventListener("focus", 関数)を使ってJavaScript側からイベントリスナーを登録する方法もおすすめです。また、フォーカスが外れたときに処理を行いたい場合は、対になるonblur属性を使用します。

  1. ユーザーがHTML要素にテキストを貼り付けたときにスクリプトを実行する方法（onpaste属性）

    HTMLでは、ユーザーが要素にテキストを貼り付けた瞬間に onpaste 属性（イベントハンドラ）がトリガーされます。この属性を活用することで、貼り付け操作を検知し、任意のJavaScript関数を実行することができます。onpaste属性の基本的な使い方以下のコードは、テキスト入力欄に何かを貼り付けたときに display() 関数を呼び出すシンプルな例です。実際にブラウザで動作させて確認してみてください。<!DOCTYPE html> <html>    <body>       <input ty

  2. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実