テキストボックス内のJavaScriptのEnterキーを使用してボタンのクリックをトリガーするにはどうすればよいですか?

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

JavaScript は、特定のテキスト ボックス内で Enter キーを押したときにボタン クリック イベントをトリガーする便利なソリューションを提供します。ソリューションを詳しく見てみましょう:

jQuery の実装:

jQuery フレームワーク内では、次のコード スニペットにより目的の動作が実現されます:

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

その仕組みは次のとおりです:

1. $("#id_of_textbox") セレクターは、指定された ID を持つテキスト ボックスをターゲットにします。
2. keyup イベント リスナーは、テキスト ボックス内で Enter キーが離されたときを監視します。
3. イベント ハンドラー内で、 events.keyCode プロパティは、押されたキーのコードが Enter キーのコードと一致するかどうかを確認します (13)。
4. Enter キーが押されると、$("#id_of_button").click() ステートメントは、指定されたボタンのクリック イベントをシミュレートします。

ネイティブ JavaScript 実装:

純粋な JavaScript では、次のコードを使用できます:

const textbox = document.getElementById("id_of_textbox");
const button = document.getElementById("id_of_button");

textbox.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        button.click();
    }
});

Thisコード:

1. ID を使用してテキスト ボックスとボタン要素を参照します。
2. テキスト ボックスにキー押下イベント リスナーをアタッチします。
3. イベント ハンドラー内で、押されたキーが Enter キーであるかどうかを確認します。
4. Enter キーが押された場合、button.click() メソッドボタンのクリックをシミュレートします。

実装上の考慮事項:

1. ID の指定: テキスト ボックスとボタンが要素にはコードが機能するための一意の ID があります
2. フォーム送信の回避: Enter キーを使用してフォームを送信すると、ボタンのクリック イベントと競合する可能性があります。これを防ぐには、フォームの送信に Enter キーを使用しないようにします。
3. 互換性: キープレス ソリューションはキーアップよりも最新であると考えられていますが、古いブラウザーではキーアップが必要な場合があります。

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