Auslösen eines Tastenklicks mit JavaScript auf die Eingabetaste in einem Textfeld

Question

Ich habe eine Texteingabe und eine Schaltfläche (siehe unten). Wie kann ich JavaScript verwenden, um das Klick-Ereignis der Schaltfläche auslösen wenn die Enter Taste innerhalb des Textfeldes gedrückt wird?

Auf meiner aktuellen Seite gibt es bereits eine andere Schaltfläche "Senden", also kann ich die Schaltfläche nicht einfach zu einer Schaltfläche "Senden" machen. Und, ich nur wollen die Enter Taste, um auf diese spezielle Schaltfläche zu klicken, wenn sie in diesem einen Textfeld gedrückt wird, sonst nichts.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 1

In jQuery würde das Folgende funktionieren:

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

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

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Oder in einfachem JavaScript würde das Folgende funktionieren:

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

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

Dann geben Sie es einfach ein!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Answer 3

Ich habe es herausgefunden:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Answer 4

Machen Sie die Schaltfläche zu einem Submit-Element, damit es automatisch funktioniert.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Beachten Sie, dass Sie eine <form> Element, das die Eingabefelder enthält, damit dies funktioniert (danke Sergey Ilinsky).

Es ist keine gute Praxis, das Standardverhalten neu zu definieren, die Enter Taste sollte immer die Schaltfläche "Senden" eines Formulars aufrufen.

Answer 5

Da noch niemand die addEventListener aber hier ist meine Version. Gegeben die Elemente:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Ich würde das Folgende verwenden:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Auf diese Weise können Sie den Ereignistyp und die Aktion separat ändern und gleichzeitig den HTML-Code sauber halten.

Hinweis dass es sich wahrscheinlich lohnt, dafür zu sorgen, dass dies außerhalb eines <form> denn wenn ich diese Elemente einfüge und die Eingabetaste drücke, wird das Formular abgeschickt und die Seite neu geladen. Ich brauchte einige Augenblicke, um das zu erkennen.

Nachtrag : Dank eines Kommentars von @ruffin habe ich den fehlenden Event-Handler und eine preventDefault damit dieser Code (vermutlich) auch innerhalb eines Formulars funktionieren kann. (Ich werde dies noch testen und dann die eingeklammerten Inhalte entfernen).