Wykryj klawisz Enter w polu wprowadzania tekstu

299

Usiłuję wykonać funkcję, jeśli klawisz Enter zostanie naciśnięty podczas określonego wejścia.

Co robię źle?

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

Czy istnieje lepszy sposób, aby to zrobić, gdyby wciśnięty klawisz Enter .input1działał?

jQuerybeast
źródło

Odpowiedzi:

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


//keyup not compatible with Jquery select(), Keydown is.
Joseph Silber
źródło
W której przeglądarce testujesz? Myślę, że starsze wersje IE nie wyzwalają zdarzeń kluczowych w dokumencie (choć nie jestem tego pewien).
Joseph Silber,
2
Twój kod nie działał, ponieważ użyłeś .is () i potrzebujesz === zamiast ==. Zobacz moją odpowiedź, aby uzyskać więcej informacji.
wesbos
6
@ jQuerybeast To nie jest potrzebne i event.keyCodejest Number, więc JavaScript będzie robił te same kroki z ==lub ===.
alex
7
e. który został uznany za bardziej przydatny w różnych przeglądarkach
mohammad eslahi sani
2
Właściwości which, code, charCodei keyCodejest przestarzała developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , dodaj aktualne informacje na odpowiedź.
Sasay
120

event.key === „Enter”

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

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

Jeśli musisz użyć jQuery:

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

Dokumenty Mozilla

Obsługiwane przeglądarki

Gibolt
źródło
6
hołd dla zwykłej wersji javascript, nie jestem pewien, dlaczego wszyscy inni są w jquery
Captain Fantastic
7
Ponieważ OP umieścił swój przykładowy kod w jQuery i (podobnie jak JavaScript) jQuery jest otagowany.
Tigerrrrr
44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Lub po prostu powiąż z samym wejściem

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

Aby dowiedzieć się, jakiego kodu klucza potrzebujesz, skorzystaj ze strony internetowej http://keycode.info

wesbos
źródło
Dziękuję Ci. Nauczyłem się czegoś nowego. Przy okazji użyłem .is () DUŻO razy, więc nie jest to logiczne, nie działa. Również ==, ponownie użyłem dwóch == w innych sytuacjach
jQuerybeast
np, zawsze powinieneś używać ===
wesbos
12

Spróbuj wykryć Enterklawisz wciśnięty w polu tekstowym.

$(function(){

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

});
ShankarSangoli
źródło
6

Może być za późno, aby odpowiedzieć na to pytanie. Ale poniższy kod po prostu zapobiega klawiszowi Enter. Wystarczy skopiować i wkleić.

        <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.
źródło
6

Najlepszym sposobem, jaki znalazłem, jest używanie keydown( keyupnie działa dla mnie dobrze).

Uwaga: wyłączyłem również przesyłanie formularza, ponieważ zwykle, gdy chcesz wykonać jakieś czynności po naciśnięciu klawisza Enter, jedyną rzeczą, którą nie lubisz, jest przesłanie formularza :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});
Roy Shoa
źródło
event.keyCode jest przestarzałym zdarzeniem. które nie jest, więc lepiej
Alex
3

Rozwiązanie, które działa dla mnie, jest następujące

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});
Jorge Santos Neill
źródło
1

Spróbuj wykryć klawisz Enter wciśnięty w polu tekstowym.

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

PRÓBNY

jonathan klevin
źródło
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
źródło
0

Ten kod obsługiwał dla mnie wszystkie dane wejściowe w całej witrynie. Sprawdza klawisz ENTER w polu INPUT i nie zatrzymuje się na TEXTAREA ani w innych miejscach.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Umar Niazi
źródło