Wie kann ich mit JavaScript einen Schaltflächenklick auslösen, wenn die Eingabetaste in einem Textfeld gedrückt wird?

Schaltflächenklicks mit JavaScript auf die Eingabetaste eines Textfelds auslösen

In der Webentwicklung ist es oft wünschenswert, Aktionen auf Formularelementen auszulösen, z Schaltflächen, wenn bestimmte Ereignisse auftreten. Ein häufiges Szenario ist das Auslösen eines Tastenklicks, wenn die Eingabetaste in einem Texteingabefeld gedrückt wird. So können Sie dies mit JavaScript erreichen:

Mit jQuery

jQuery, eine beliebte JavaScript-Bibliothek, bietet eine einfache Lösung für dieses Problem:

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

Dieser Code fügt einen Keyup-Ereignis-Listener an das Texteingabefeld mit der ID „id_of_textbox“ an. Wenn die Eingabetaste (keyCode 13) innerhalb dieser Eingabe gedrückt wird, löst sie das Klickereignis auf der Schaltfläche mit der ID „id_of_button“ aus.

Benutzerdefiniertes JavaScript

If Wenn Sie keine Bibliothek verwenden möchten, können Sie diese Funktionalität mit einfachem JavaScript implementieren:

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

Dieser Code führt die gleiche Aufgabe aus wie das jQuery-Beispiel. Es verwendet jedoch die native Methode addEventListener(), um den Keyup-Listener an die Texteingabe anzuhängen.

Beispielverwendung

Bedenken Sie das folgende HTML-Markup:

<input type="text">

Um den Klick auf die Schaltfläche „btnSearch“ auszulösen, wenn in der Eingabe „txtSearch“ die Eingabetaste gedrückt wird, verwenden Sie einen der bereitgestellten Codes Snippets, wobei die Element-IDs entsprechend ersetzt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript einen Schaltflächenklick auslösen, wenn die Eingabetaste in einem Textfeld gedrückt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!