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

HTMLの検索フィールドでスクリプトを実行する方法｜onsearch属性の使い方

HTMLでは、onsearch属性を使うことで、ユーザーが検索フィールド（<input type="search">）に文字を入力し、Enterキーまたはフィールド右側の「×」ボタンを押したタイミングでJavaScriptを実行できます。検索フォームの挙動をカスタマイズしたい場合に便利な属性です。

実装例

以下のコードを実行すると、onsearch属性の動作を実際に確認できます。検索フィールドに任意のキーワードを入力して、Enterキーを押してみてください。

<!DOCTYPE html>
<html>
   <body>
      <p>キーワードを入力してEnterキーを押してください。</p>
      <input type = "search" id="inputID" onsearch = "display()">
      <p><strong>注意：</strong> Internet ExplorerとFirefoxでは動作しません。</p>
      <p id="test"></p>
      <script>
         function display() {
         var a = document.getElementById("inputID");
         document.getElementById("test").innerHTML = "検索したキーワード： " + a.value;
         }
    </script>
   </body>
</html>

コードの解説

  • type="search" を指定したinput要素が検索フィールドになります。
  • onsearch="display()" により、検索が確定されたタイミングで display() 関数が呼び出されます。
  • display() 関数内では、入力欄の値を取得し、その内容を画面に表示しています。

ブラウザ対応に関する注意点

onsearch属性はInternet ExplorerおよびFirefoxではサポートされていません。より多くの環境に対応させたい場合は、keydownイベントでEnterキーの押下を判定したり、inputイベントと組み合わせるなどの代替手段を検討するとよいでしょう。

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

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

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

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