テキスト ボックスで Enter キーが押されたときに JavaScript でボタンのクリックをトリガーするにはどうすればよいですか?

テキスト ボックス Enter キーで JavaScript を使用してボタン クリックをトリガーする

Web 開発では、多くの場合、次のようなフォーム要素でアクションをトリガーすることが望ましいです。特定のイベントが発生したときにボタンを押します。一般的なシナリオの 1 つは、テキスト入力フィールド内で Enter キーが押されたときにボタンのクリックをトリガーすることです。これを JavaScript で実現する方法は次のとおりです。

jQuery の使用

人気の JavaScript ライブラリである jQuery は、この問題に対する簡単な解決策を提供します。

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

このコードは、ID「id_of_textbox」を持つテキスト入力フィールドに keyup イベント リスナーをアタッチします。この入力内で Enter キー (keyCode 13) が押されると、ID「id_of_button」を持つボタンのクリック イベントがトリガーされます。

カスタム JavaScript

場合ライブラリを使用したくない場合は、プレーンな JavaScript を使用してこの機能を実装できます:

document.getElementById("id_of_textbox").addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

このコードjQuery の例と同じタスクを実行しますが、ネイティブの addEventListener() メソッドを使用してキーアップ リスナーをテキスト入力に付加します。

使用例

次の HTML マークアップ:

<input type="text">

内で Enter キーを押したときに「btnSearch」ボタンをクリックしてトリガーします。 「txtSearch」入力の場合は、提供されたコード スニペットの 1 つを使用し、それに応じて要素 ID を置き換えます。

以上がテキスト ボックスで Enter キーが押されたときに JavaScript でボタンのクリックをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。