Jak wykryć naciśnięcie Enter na klawiaturze za pomocą jQuery?

731

Chciałbym sprawdzić, czy użytkownik nacisnął Enterprzy użyciu jQuery.

Jak to jest możliwe? Czy wymaga wtyczki?

EDYCJA: Wygląda na to, że muszę użyć tej keypress()metody.

Chciałem się dowiedzieć, czy ktoś wie, czy występują problemy z przeglądarką związane z tym poleceniem - na przykład czy są jakieś problemy ze zgodnością przeglądarki, o których powinienem wiedzieć?

javascript jquery keyboard-events enter jquery-events Chris
źródło
link o tym .keypress () | Dokumentacja API jQuery
Haim Evgi
5
Jedną z najlepszych rzeczy w frameworkach Javascript jest to, że powinny one być domyślnie kompatybilne z różnymi przeglądarkami. Obsługują kontrole zgodności przeglądarki, aby użytkownik nie musiał. Nie przeczytałem kodu źródłowego JQuery, ale wątpię, aby funkcjonalność klawiszy była w tym sensie inna.
miek
2
jedynym problemem związanym ze zgodnością przeglądarki jest to, że do wykrycia kodu ascii należy użyć e.which zamiast e.keyCode.
Daniel
1
stackoverflow.com/questions/302122/…
Lemo

Odpowiedzi:

1330

Cały sens jQuery polega na tym, że nie musisz się martwić różnicami w przeglądarce. Jestem pewien, że możesz bezpiecznie przejść enter13 lat we wszystkich przeglądarkach. Mając to na uwadze, możesz to zrobić:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
Paolo Bergantino
źródło
7
Łączę się z tym, ponieważ przeczytałem to i zostawiłem drapanie głowy nad tym, dlaczego naciśnięcie klawisza nie działa w IE. (nie będzie wiązać się $(window)z IE) quirksmode.org/dom/events/keys.html
Incognito
17
e.keyCode nie jest w 100% przeglądarką. użyj e. które zamiast tego, jak pokazano poniżej
Daniel
15
Z dokumentacji jQuery „Właściwość event.which normalizuje event.keyCode i event.charCode. Zalecane jest obejrzenie zdarzenia event.which w celu wprowadzenia danych z klawiatury.”
Riccardo Galli
20
$ (dokument) .on („naciśnięcie klawisza”, funkcja (e) {
user956584 10.04.13
5
Otrzymuję wiele wykonań danej funkcji z powodu propagacji zdarzeń (tj. Alert jest generowany dwukrotnie). Aby temu zapobiec, dodaj e.stopPropagation () na końcu funkcji
dpb
129

Napisałem małą wtyczkę, aby ułatwić powiązanie zdarzenia „po naciśnięciu klawisza Enter”:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Stosowanie:

$("#input").enterKey(function () {
    alert('Enter!');
})
Andrea
źródło
To nie działa dla mnie (dostałem #inputsię na <input>boisko)
Rápli András
1
Co jeśli element #input będzie dynamiczny?
Jigar7521,
@mplungjan nie jestem pewien, co masz na myśli przez „delegowanie”
Andrea
$("#input").on("someevent","someselector",function () {})
mplungjan
62

Nie mogłem uruchomić kodu wysłanego przez @Paolo Bergantino do pracy, ale kiedy go zmieniłem na $(document)i e.whichzamiast e.keyCodetego przekonałem się, że działa bezbłędnie.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Link do przykładu na JS Bin

Ian Roke
źródło
Dla mnie e. Który nie działa z IE. Czy to działa dla innych?
Umesh Rajbhandari,
Która wersja IE? Działa dobrze dla mnie na IE7.
Ian Roke,
Z dokumentacji jQuery „Właściwość event.which normalizuje event.keyCode i event.charCode. Zalecane jest obejrzenie zdarzenia event.which w celu wprowadzenia danych z klawiatury.”
Riccardo Galli
52

Przekonałem się, że jest to bardziej kompatybilne z różnymi przeglądarkami:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
jesal
źródło
1
Twój IF trójskładnikowy można skrócić do: var keycode = event.keyCode || event.which;
pistolet-pete
29

Możesz to zrobić za pomocą uchwytu zdarzenia „keydown” jquery

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
Nasruddin
źródło
11

Użyj event.keyi nowoczesny JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

lub bez jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Dokumenty Mozilla

Obsługiwane przeglądarki

Gibolt
źródło
9

Spędziłem trochę czasu wymyślając to rozwiązanie, mam nadzieję, że to komuś pomoże.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
Samuel Kwame Antwi
źródło
8

Istnieje metoda zdarzenia keypress () . Numer ascii klawisza Enter to 13 i nie zależy od używanej przeglądarki.

Richard Simões
źródło
7

Niewielkie rozszerzenie powyższej odpowiedzi Andrei sprawia, że ​​metoda pomocnika jest bardziej przydatna, gdy możesz również chcieć przechwycić zmodyfikowane naciśnięcia Enter (tj. Ctrl-Enter lub Shift-Enter). Na przykład ten wariant umożliwia wiązanie, takie jak:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

aby przesłać formularz, gdy użytkownik naciśnie klawisz Ctrl-Enter, koncentrując się na obszarze tekstowym tego formularza.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(patrz także Ctrl + Enter jQuery w TEXTAREA )

joeln
źródło
4

W niektórych przypadkach może być konieczne pominięcie ENTERklawisza dla określonego obszaru strony, ale nie dla innych obszarów strony, takich jak strona poniżej, która zawiera nagłówek <div> z polem WYSZUKIWANIA .

Trochę mi zajęło wymyślenie, jak to zrobić, i zamieszczam tutaj prosty, ale kompletny przykład dla społeczności.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Link do placu zabaw JSFiddle : [Submit]Przycisk nic nie robi, ale naciśnięcie ENTERjednego z elementów sterujących pola tekstowego nie spowoduje przesłania formularza.

jp2code
źródło
2

Ponieważ keypresswydarzenie nie jest objęte żadną oficjalną specyfikacją, rzeczywiste zachowanie występujące podczas jego używania może się różnić w zależności od przeglądarki, wersji przeglądarki i platformy.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
Rozwiń fragment kodu

Mam nadzieję, że się przyda!

Zoe_NS
źródło
Należy zauważyć, że powodem, dla którego keypressnie ma w specyfikacji (już), jest to, że została uznana za przestarzałą ( MDN ).
YellowAfterlife
edytowałem więc ... tnx <3
Zoe_NS,
0

Łatwym sposobem na wykrycie, czy użytkownik nacisnął klawisz Enter, jest użycie numeru klucza, aby wprowadzić numer klucza = 13, aby sprawdzić wartość klucza w urządzeniu

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

naciskając klawisz Enter otrzymasz wynik jako 13. Używając wartości klucza, możesz wywołać funkcję lub zrobić cokolwiek zechcesz

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

jeśli chcesz wycelować w przycisk po naciśnięciu klawisza Enter, możesz użyć kodu 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Mam nadzieję, że to pomoże

użytkownik2216399
źródło
0

Myślę, że najprostszą metodą byłoby użycie javacript waniliowy :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
Duan Walker
źródło
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
Tayfun Açıkgöz
źródło
3
Czy możesz dodać trochę objaśniających komentarzy, aby wyjaśnić pytającemu, jak działa Twój kod - dzięki.
SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
AzizAhmad
źródło
Wygląda to na adaptację innych odpowiedzi - czy możesz dodać jakieś wyjaśnienie, aby Twoje było równie interesujące jak inne?
Nico Haase,
0

Kiedyś $(document).on("keydown").

W niektórych przeglądarkach keyCodenie jest obsługiwany. To samo z, whichwięc jeśli keyCodenie jest obsługiwane, musisz użyć whichi odwrotnie.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Rozwiń fragment kodu

Justin Liu
źródło