Erkennen Sie die Eingabetaste in einem Texteingabefeld

299

Ich versuche eine Funktion auszuführen, wenn bei einer bestimmten Eingabe die Eingabetaste gedrückt wird.

Was mache ich falsch?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Gibt es eine bessere Möglichkeit, dies zu .input1tun , wenn die Eingabetaste gedrückt wird ?

jQuerybeast
quelle
1
Mögliches Duplikat des Enter-Tastendruckereignisses in JavaScript
Bae

Antworten:

499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.
Joseph Silber
quelle
In welchem ​​Browser haben Sie es getestet? Ich denke, ältere Versionen von IE lösen keine Keyup-Ereignisse im Dokument aus (sind sich jedoch nicht sicher).
Joseph Silber
2
Ihr Code hat nicht funktioniert, weil Sie .is () verwendet haben und === statt == benötigt haben. Siehe meine Antwort für weitere Details.
Wesbos
6
@jQuerybeast Es wird nicht benötigt und event.keyCodeist ein Number, daher unternimmt JavaScript die gleichen Schritte mit ==oder ===.
Alex
7
e.was als nützlicher Cross-Browser
deklariert wird
2
Eigenschaften which, code, charCodeund keyCodesind veraltet developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , bitte aktuelle Informationen zu Ihrer Antwort hinzufügen.
Sasay
120

event.key === "Enter"

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Wenn Sie jQuery verwenden müssen:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
6
Ein großes Lob für die einfache Javascript-Version, nicht sicher, warum alle anderen in jquery sind
Captain Fantastic
7
Weil das OP seinen Beispielcode in jQuery einfügt und (sowie JavaScript) jQuery markiert ist.
Tigerrrrr
44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Oder binden Sie einfach an die Eingabe selbst

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Verwenden Sie die Website http://keycode.info , um herauszufinden, welchen Schlüsselcode Sie benötigen

wesbos
quelle
Danke dir. Ich habe etwas Neues gelernt. Übrigens habe ich .is () VIELE Male benutzt, also ist es keine Logik, nicht zu arbeiten. Auch die ==, wieder habe ich zwei == für andere Situationen verwendet
jQuerybeast
np, du solltest immer ===
wesbos
12

Versuchen Sie dies, um die Enterin einem Textfeld gedrückte Taste zu erkennen .

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});
ShankarSangoli
quelle
6

Es kann zu spät sein, diese Frage zu beantworten. Der folgende Code verhindert jedoch einfach die Eingabetaste. Einfach kopieren und einfügen sollte funktionieren.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>
Indra Kumar S.
quelle
6

Der beste Weg, den ich gefunden habe, ist die Verwendung keydown(das keyupfunktioniert bei mir nicht gut).

Hinweis: Ich habe auch das Senden des Formulars deaktiviert, da Sie normalerweise nur das Formular senden möchten, wenn Sie beim Drücken der Eingabetaste einige Aktionen ausführen möchten :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});
Roy Shoa
quelle
event.keyCode ist veraltet event.which nicht, also ist das besser
Alex
3

Die Lösung, die für mich funktioniert, ist die folgende

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});
Jorge Santos Neill
quelle
1

Versuchen Sie dies, um die in einem Textfeld gedrückte Eingabetaste zu erkennen.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO

Jonathan Klevin
quelle
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
quelle
0

Dieser Code behandelte jede Eingabe für mich auf der gesamten Site. Es sucht in einem INPUT-Feld nach der ENTER-TASTE und stoppt nicht bei TEXTAREA oder anderen Stellen.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Umar Niazi
quelle