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

HTMLで要素がフォーカスを失ったときにスクリプトを実行するには？

HTMLでは、onblur属性を使うことで、要素がフォーカスを失ったタイミングでスクリプトを実行できます。
例えば、テキスト入力欄からカーソルが外れた瞬間に入力内容を加工するといった処理が簡単に実装可能です。

以下のサンプルコードを実行して、onblur属性の動作を確認してみてください。

コード例

<!DOCTYPE html>
<html>
   <body>
      <p>下記に入力してください！</p>

      Country: <input type = "text" name = "myid" id = "myid" onblur = "display()">

      <script>
         function display() {
            var str = document.getElementById("myid");
            str.value = str.value.toUpperCase();
         }
      </script>

   </body>
</html>

解説

このサンプルでは、テキストボックスに「Country（国名）」を入力し、別の場所をクリックするなどしてフォーカスが外れると、display()関数が自動的に呼び出されます。

関数内では、document.getElementById()で入力欄の値を取得し、toUpperCase()メソッドによってすべて大文字に変換しています。つまり、「japan」と入力してフォーカスを外すと、自動的に「JAPAN」へと変換される仕組みです。

このようにonblur属性は、入力内容のチェックや書式の整形など、ユーザーが入力を完了した直後に処理を行いたい場面で非常に便利です。

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

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

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

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実