jQuery Event Keypress: Który klawisz został naciśnięty?

706

W jQuery, jak mogę dowiedzieć się, który klawisz został naciśnięty podczas łączenia się ze zdarzeniem naciśnięcia klawisza?

$('#searchbox input').bind('keypress', function(e) {});

Chcę uruchomić wysyłanie po ENTERnaciśnięciu.

[Aktualizacja]

Chociaż sam znalazłem (lub lepiej: jedną) odpowiedź, wydaje się, że jest miejsce na różnice;)

Czy jest jakaś różnica między - keyCodea whichzwłaszcza jeśli tylko szukam ENTER, która nigdy nie będzie kluczem Unicode?

Czy niektóre przeglądarki zapewniają jedną właściwość, a inne drugą?

BlaM
źródło
295
** Jeśli ktoś osiągnął to z Google (tak jak ja), wiedz, że „keyup” zamiast „keypress” działa w Firefox, IE i Chrome. „naciśnięcie klawisza” najwyraźniej działa tylko w przeglądarce Firefox.
Tyler,
17
również „keydown” działa lepiej niż „keyup” do wyzwalania zdarzenia PO naciśnięciu klawisza (oczywiście), ale jest to ważne, jeśli mówisz, że chcesz wywołać zdarzenie na DRUGIM backspace, jeśli obszar tekstowy jest pusty
Tyler
12
Jeśli chodzi o e.keyCode VS e.which ... Z moich testów, Chrome i IE8: moduł obsługi klawiszy () zostanie uruchomiony tylko dla normalnych znaków (tj. Nie w górę / w dół / Ctrl), i zarówno e.keyCode, jak i e. który zwróci kod ASCII. Jednak w Firefoksie wszystkie klawisze wywołują naciśnięcie klawisza (), ALE: dla normalnych znaków e. Który zwróci kod ASCII i e.keyCode zwróci 0, a dla znaków specjalnych (np. Góra / dół / Ctrl) e.keyCode zwróci kod klawiatury i e. który zwróci 0. Jak fajnie.
jackocnr
4
Ostrzeżenie: NIE używaj kodu z Google. Autor jquery przesłał łatkę, która znajduje się tylko w repozytorium github (i widelcu Johna Resiga): github.com/tzuryby/jquery.hotkeys . Ten z kodu Google źle zachowuje się podczas wiązania więcej niż jednego kluczowego zdarzenia z tym samym węzłem dom. Nowy rozwiązuje to.
Daniel Ribeiro
4
„keyup” zostanie uruchomiony bardzo późno, gdy np. naciśniesz klawisz przez długi czas. Zobacz tutaj jsbin.com/aquxit/3/edit, więc kluczem jest keydown
Toskan

Odpowiedzi:

844

W rzeczywistości jest to lepsze:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Eran Galperin
źródło
84
if ((e.keyCode || e.which) == 13)? ;)
Kezzer
49
Zgodnie z komentarzem w dalszej części tej strony, jQuery normalizuje się tak, że „które” jest definiowane za każdym razem w obiekcie zdarzenia. Tak więc sprawdzanie „keyCode” powinno być niepotrzebne.
Ztyx
197
Dlaczego liczą się tak ogromne głosy? Pytanie dotyczy jQuery, która normalizuje te rzeczy, więc nie musisz używać niczego innegoe.which , niezależnie od tego, które zdarzenie używasz.
Tim Down
48
@Tim: Niestety, właśnie przetestowałem to w Firefoksie przy użyciu api.jquery.com/keypress : kiedy naciskam <Tab>, e.whichnie jest ustawione (pozostaje 0), ale e.keyCodejest ( 9). Zobacz stackoverflow.com/questions/4793233/... dlaczego to ma znaczenie.
Marcel Korpel
3
@Marcel: Tak, obsługa klucza przez jQuery ma wady i jest to niefortunny przykład, ale dla klawisza Enter, o co pyta to pytanie, sytuacja jest niezwykle prosta.
Tim Down
133

Spróbuj tego

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Vladimir Prudnikov
źródło
5
@VladimirPrudnikov Och, och, ach! Ahh! pod tym linkiem znajdował się Mac. Ludzkość !!!
Ben DeMott,
1
Cóż, uruchomiliśmy również nową wersję z aplikacją Windows .. sprawdź snippets.me
Vladimir Prudnikov
2
@VladimirPrudnikov co powiesz na wersję dla Linuksa?
Arda,
@Arda nie planujemy wersji Linux. Będzie aplikacja internetowa i publiczny interfejs API, więc być może ktoś go utworzy :)
Vladimir Prudnikov,
1
Ha ha ha, narzędzie programistyczne bez planów dla systemu Linux. Bogaty!
Ziggy,
61

Jeśli używasz interfejsu jQuery, masz tłumaczenia popularnych kodów kluczy. W plikach ui / ui / ui.core.js :

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

Jest też kilka tłumaczeń w testach / simulate / jquery.simulate.js, ale nie mogłem znaleźć żadnych w podstawowej bibliotece JS. Pamiętajcie, po prostu pozdrowiłem źródła. Może istnieje inny sposób na pozbycie się tych magicznych liczb.

Możesz także skorzystać z String.charCodeAt i .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
użytkownik35612
źródło
13
Korekta to * $. Ui.keyCode.ENTER ** nie * $. KeyCode.ENTER - działa jak urok, choć dzięki za wskazówkę!
daniellmb
Uncaught TypeError: String.charCodeAt is not a functionMyślę, że chciałeś powiedzieć'\r'.charCodeAt(0) == 13
Patrick Roberts,
39

Biorąc pod uwagę, że używasz jQuery, powinieneś bezwzględnie używać. Które. Tak, różne przeglądarki ustawiają różne właściwości, ale jQuery je znormalizuje i ustawi wartość .w każdym przypadku. Zobacz dokumentację na http://api.jquery.com/keydown/, która stanowi:

Aby ustalić, który klawisz został naciśnięty, możemy zbadać obiekt zdarzenia przekazany do funkcji modułu obsługi. Podczas gdy przeglądarki używają różnych właściwości do przechowywania tych informacji, jQuery normalizuje właściwość .which, dzięki czemu możemy niezawodnie użyć jej do pobrania kodu klucza.

Frank Schwieterman
źródło
2
Z tego, co widziałem, użycie event.which i próba porównania z $ .ui.keyCode powoduje niepewne zachowanie. W szczególności mały klawisz [L], który odwzorowuje na $ .ui.keyCode.NUMPAD_ENTER. Uroczy.
Danny
4
Czy masz repozytorium, które pokazuje ten błąd? Lepiej jest zgłosić to właścicielom jQuery niż spróbować ponownie wdrożyć swoją pracę.
Frank Schwieterman,
31

... ten przykład uniemożliwia przesłanie formularza (regularnie podstawowa intencja podczas przechwytywania naciśnięcia klawisza # 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
użytkownik184365
źródło
28

edycja: Działa to tylko dla IE ...

Zdaję sobie sprawę, że to stary post, ale ktoś może uznać to za przydatne.

Kluczowe zdarzenia są odwzorowywane, więc zamiast używać wartości kodu klucza, można również użyć wartości klucza, aby uczynić ją nieco bardziej czytelną.

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

Oto ściągawka z mapowanymi kluczami, które otrzymałem z tego bloga wprowadź opis zdjęcia tutaj

Kevin
źródło
5
Nie ma e.keywłasności
SLaks,
3
Hmm, wygląda na to, że jest to właściwość specyficzna dla IE. Działa w mojej aplikacji w IE, ale nie w Chrome. Chyba używam kodu.
Kevin
28
 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });
Luca Filosofi
źródło
1
To jest prawdziwa odpowiedź. Przyjęty zadziała dla niektórych kluczy (jak enter), ale nie powiedzie się dla innych (jak supr, który zostanie pomylony przez a.)
Oscar Foley
19
Jest to bezpośrednia pasta ze źródła jQuery i jest to kod używany przez jQuery do normalizacji właściwości zdarzenia .which.
Ian Clelland
@Ian Clelland: Nie rozumiem, o co ci chodzi, czy to działa dobrze czy nie !? lol
Luca Filosofi
13
To działa; Jestem tego pewien, ponieważ jQuery używa dokładnie tego kodu :) Jeśli już masz jQuery, skorzystaj z niego - nie musisz go mieć we własnym kodzie.
Ian Clelland
1
@ aSeptik: Pytanie brzmiało: „Mam jQuery; jak mam nacisnąć klawisz” - twoja odpowiedź pokazuje, w jaki sposób jQuery je zdobywa. Chodzi mi o to, że ponieważ jQuery zawiera już ten wiersz kodu, nie potrzebuje go. On może po prostu użyć event.which.
Ian Clelland
14
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

Mam nadzieję, że to może ci pomóc !!!


źródło
12

Jest to prawie pełna lista kodów kluczowych:

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
Ivan
źródło
6

Oto szczegółowy opis zachowania różnych przeglądarek http://unixpapa.com/js/key.html

Phil
źródło
2
Jest to absolutnie strona, którą powinni czytać wszyscy, którzy chodzą wokół i udzielają beznadziejnych odpowiedzi.
Tim Down
5

Po prostu uzupełnię kod rozwiązania tą linią e.preventDefault();. W przypadku pola wejściowego formularza nie bierzemy udziału w wciśnięciu Enter

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
dzona
źródło
4

Dodaj ukryte przesyłanie, nie wpisuj ukryte, po prostu zwykłe przesyłanie ze stylem = "display: none". Oto przykład (usunięto niepotrzebne atrybuty z kodu).

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

akceptuje natywnie klawisz Enter, nie wymaga JavaScript, działa w każdej przeglądarce.

Pedja
źródło
4

Oto rozszerzenie jquery, które obsługuje naciśnięty klawisz Enter.

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

Działający przykład można znaleźć tutaj http://jsfiddle.net/EnjB3/8/

Reid Evans
źródło
4

Czarownica ;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

Demo: http://jsfiddle.net/molokoloco/hgXyq/24/

molokoloco
źródło
4

Użyj event.keyi nowoczesny JS!

Brak kodów liczbowych . Możesz sprawdzić klucz bezpośrednio. Na przykład "Enter", "LeftArrow", "r", lub "R".

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Dokumenty Mozilla

Obsługiwane przeglądarki

Gibolt
źródło
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

powinieneś mieć firbug, aby zobaczyć wynik w konsoli

manny
źródło
3

Niektóre przeglądarki używają keyCode, inne używają których. Jeśli używasz jQuery, możesz niezawodnie używać tego, ponieważ jQuery standaryzuje rzeczy. Tak właściwie,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
Hitesh Modha
źródło
2

Zgodnie z odpowiedzią Kiliana:

Jeśli tylko wprowadź klawisz, ważne jest:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

źródło
2

Najłatwiej to zrobić:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Rodolfo Jorge Nemer Nogueira
źródło
1
Lepiej byłoby użyć event.whichzamiast event.keyCode. Z jQuery API :The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
zanetu
2

Właśnie stworzyłem wtyczkę do jQuery, która umożliwia łatwiejsze keypresszdarzenia. Zamiast znajdować numer i wstawiać go, wszystko co musisz zrobić, to:

Jak tego użyć

  1. Dołącz kod, który mam poniżej
  2. Uruchom ten kod:
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

To takie proste. Należy pamiętać, że nietheKeyYouWantToFireAPressEventFor jest to liczba, ale ciąg znaków (np. Do odpalenia po naciśnięciu, do odpalenia po naciśnięciu lub, w przypadku liczby, po prostu bez cudzysłowów. Odpaliłby po naciśnięciu)."a"A"ctrl"CTRL (control)11

Przykład / kod:

Ponieważ długa wersja jest tak ... no ... długa, stworzyłem dla niej link PasteBin:
http://pastebin.com/VUaDevz1

Zach Barham
źródło
Możesz sprawić, by funkcja była znacznie krótsza i szybsza, jeśli nie użyjesz milionów porównań „jeśli” -> jsfiddle.net/BlaM/bcguctrx - Pamiętaj również, że - na przykład - openbracket i closebracket nie są nawiasami otwierającymi / zamykającymi na Niemiecka klawiatura`.
BlaM
Podobało mi się to rozwiązanie. miły.
Jay
-9

Spróbuj tego:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
Omar Yepez
źródło