Frage Klicken Sie auf einen Button, klicken Sie mit JavaScript auf die Eingabetaste in einem Textfeld


Ich habe eine Texteingabe und eine Schaltfläche (siehe unten). Wie kann ich JavaScript verwenden? löst das click-Ereignis der Schaltfläche aus wenn das Eingeben Taste wird in das Textfeld gedrückt?

Es gibt bereits eine andere Schaltfläche zum Senden auf meiner aktuellen Seite, daher kann ich die Schaltfläche nicht einfach als Absenden-Schaltfläche verwenden. Und ich nur will das Eingeben Taste, um auf diese spezielle Schaltfläche zu klicken, wenn sie aus diesem einen Textfeld gedrückt wird, sonst nichts.

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

1099
2017-09-30 21:32


Ursprung


Antworten:


In jQuery würde Folgendes 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 Folgendes 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>


1284
2017-09-30 21:52



Dann codiere 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();"
/>

359
2017-09-30 21:56



Ich habe das 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>

165
2017-09-30 21:52



Machen Sie den Button zu einem Submit-Element, damit es automatisch wird.

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

Beachten Sie, dass Sie eine benötigen <form> Element, das die Eingabefelder enthält, damit das funktioniert (Danke Sergey Ilinsky).

Es ist keine gute Übung, Standardverhalten neu zu definieren, das Eingeben Schlüssel sollte immer den Absenden-Button auf einem Formular aufrufen.


75
2017-09-30 21:33



Da hat niemand gebraucht addEventListener Doch, hier ist meine Version. Angesichts der Elemente:

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

Ich würde Folgendes 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 von a <form> denn wenn ich diese Elemente in ihnen eingeschlossen habe, drückte Enter die Maske und lud die Seite neu. Nahm ein paarmal um zu entdecken.

Nachtrag: Dank eines Kommentars von @ruffin habe ich den fehlenden Event-Handler hinzugefügt und a preventDefault damit dieser Code (vermutlich) auch in einem Formular funktioniert. (Ich werde es versuchen, dies zu testen, an dem ich den in Klammern gesetzten Inhalt entfernen werde.)


67
2017-11-19 05:37



In einfachem JavaScript,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

Mir ist aufgefallen, dass die Antwort nur in jQuery gegeben wird, also dachte ich mir, auch etwas in Klartext zu geben.


55
2018-02-08 04:49



Ein Grundtrick, den Sie dafür verwenden können, den ich nicht vollständig erwähnt habe. Wenn Sie eine Ajax-Aktion oder eine andere Arbeit bei Enter ausführen möchten, aber kein Formular senden möchten, können Sie Folgendes tun:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Einstellung action = "javascript: void (0);" wie das ist eine Abkürzung für das Verhindern von Standardverhalten im Wesentlichen. In diesem Fall wird eine Methode aufgerufen, ob Sie die Eingabetaste drücken oder auf die Schaltfläche klicken und ein Ajax-Aufruf zum Laden einiger Daten ausgeführt wird.


19
2017-09-12 19:27