jQuery Event Keypress: Welche Taste wurde gedrückt?

706

Wie finde ich mit jQuery heraus, welche Taste gedrückt wurde, als ich mich an das Tastendruckereignis band?

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

Ich möchte eine Übermittlung auslösen, wenn ENTERgedrückt wird.

[Aktualisieren]

Obwohl ich die (oder besser: eine) Antwort selbst gefunden habe, scheint es Raum für Variationen zu geben;)

Gibt es einen Unterschied zwischen keyCodeund which- besonders wenn ich nur suche ENTER, was niemals ein Unicode-Schlüssel sein wird?

Stellen einige Browser eine Eigenschaft bereit und andere die andere?

BlaM
quelle
295
** Wenn jemand dies von Google aus erreicht hat (wie ich), wissen Sie, dass "keyup" anstelle von "keypress" in Firefox, IE und Chrome funktioniert. "Tastendruck" funktioniert anscheinend nur in Firefox.
Tyler
17
Außerdem funktioniert "Keydown" besser als "Keyup" zum Auslösen eines Ereignisses, nachdem die Taste (offensichtlich) gedrückt wurde. Dies ist jedoch wichtig, wenn Sie sagen, dass Sie ein Ereignis auf der zweiten Rücktaste auslösen möchten, wenn ein Textbereich leer ist
Tyler
12
Wie für e.keyCode VS e.which ... Aus meinen Tests, Chrome und IE8: Der keypress () -Handler wird nur für normale Zeichen (dh nicht Up / Down / Ctrl) und sowohl für e.keyCode als auch für e ausgelöst. Dies gibt den ASCII-Code zurück. In Firefox lösen jedoch alle Tasten keypress () aus, ABER: Für normale Zeichen gibt e.key den ASCII-Code zurück und e.keyCode gibt 0 zurück, und für Sonderzeichen (z. B. Up / Down / Ctrl) wird e.keyCode zurückgegeben den Tastaturcode und e.was wird 0 zurückgeben. Wie viel Spaß.
Jackocnr
4
Warnung: Verwenden Sie NICHT den von Google Code. Der Autor von jquery hat einen Patch eingereicht, der sich nur im Github-Repository (und auch in John Resigs Gabel) befindet: github.com/tzuryby/jquery.hotkeys . Der von Google Code verhält sich schlecht, wenn mehr als ein Schlüsselereignis an denselben Dom-Knoten gebunden wird. Der Neue löst es.
Daniel Ribeiro
4
"keyup" wird sehr, sehr spät ausgelöst, wenn Sie z. B. eine Taste längere Zeit drücken. Siehe hier jsbin.com/aquxit/3/edit, also ist Keydown der richtige Weg
Toskan

Antworten:

844

Eigentlich ist das besser:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Eran Galperin
quelle
84
if ((e.keyCode || e.which) == 13)? ;)
Kezzer
49
Laut einem Kommentar weiter unten auf dieser Seite normalisiert sich jQuery so, dass jedes Mal 'which' für das Ereignisobjekt definiert wird. Die Suche nach 'keyCode' sollte daher nicht erforderlich sein.
Ztyx
197
Warum die enorme Anzahl an Stimmen? Die Frage bezieht sich auf jQuery, das dieses Zeug normalisiert, sodass Sie nichts anderes als das vone.which Ihnen verwendete Ereignis verwenden müssen.
Tim Down
48
@Tim: Leider habe ich dies gerade mit Firefox unter Verwendung von api.jquery.com/keypress getestet : Wenn ich <Tab> drücke, e.whichwird nicht gesetzt (bleibt 0), sondern e.keyCodeist ( 9). Siehe stackoverflow.com/questions/4793233/… warum dies wichtig ist.
Marcel Korpel
3
@Marcel: Ja, die Schlüsselbehandlung von jQuery weist Mängel auf, und das ist ein unglückliches Beispiel, aber für die Eingabetaste, um die es in dieser Frage geht, ist die Situation äußerst einfach.
Tim Down
133

Versuche dies

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Vladimir Prudnikov
quelle
5
@VladimirPrudnikov Oh, oh, Ahhhh! Ahh! Es gab überall Macs an diesem Link - die Menschheit !!!
Ben DeMott
1
Nun, wir haben auch eine neue Version mit Windows-App gestartet. Schauen Sie sich snippets.me
Vladimir Prudnikov
2
@VladimirPrudnikov wie wäre es mit einer Linux-Version?
Arda
@Arda wir haben keine pläne für linux version. Es wird eine Web-App und eine öffentliche API geben, also kann es sein, dass jemand sie erstellt :)
Vladimir Prudnikov
1
Ha ha ha, ein Entwicklertool ohne Pläne für Linux. Reich!
Ziggy
61

Wenn Sie die jQuery-Benutzeroberfläche verwenden, verfügen Sie über Übersetzungen für allgemeine Schlüsselcodes. In ui / ui / ui.core.js :

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

Es gibt auch einige Übersetzungen in tests / simulate / jquery.simulate.js, aber ich konnte keine in der JS-Kernbibliothek finden. Wohlgemerkt, ich habe nur die Quellen überprüft. Vielleicht gibt es einen anderen Weg, um diese magischen Zahlen loszuwerden.

Sie können auch String.charCodeAt und .fromCharCode verwenden:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
user35612
quelle
13
Korrektur es ist * $. Ui.keyCode.ENTER ** nicht * $. KeyCode.ENTER - funktioniert wie ein Zauber, obwohl danke für den Tipp!
Daniellmb
Uncaught TypeError: String.charCodeAt is not a functionIch denke, Sie wollten sagen'\r'.charCodeAt(0) == 13
Patrick Roberts
39

Da Sie jQuery verwenden, sollten Sie unbedingt .which verwenden. Ja, verschiedene Browser legen unterschiedliche Eigenschaften fest, aber jQuery normalisiert sie und legt jeweils den .which-Wert fest. Siehe - Dokumentation über bei http://api.jquery.com/keydown/ heißt es:

Um festzustellen, welche Taste gedrückt wurde, können wir das Ereignisobjekt untersuchen, das an die Handlerfunktion übergeben wird. Während Browser unterschiedliche Eigenschaften zum Speichern dieser Informationen verwenden, normalisiert jQuery die .which-Eigenschaft, damit wir sie zuverlässig zum Abrufen des Schlüsselcodes verwenden können.

Frank Schwieterman
quelle
2
Nach dem, was ich mit event.which gesehen habe und versucht habe, es mit $ .ui.keyCode zu vergleichen, führt dies zu unsicherem Verhalten. Insbesondere die Kleinbuchstaben [L], die $ .ui.keyCode.NUMPAD_ENTER zugeordnet sind. Niedlich.
Danny
4
Haben Sie einen Repro, der diesen Fehler demonstriert? Es ist vorzuziehen, dies den Eigentümern von jQuery zu melden, anstatt zu versuchen, ihre Arbeit erneut umzusetzen.
Frank Schwieterman
31

... dieses Beispiel verhindert das Senden von Formularen (regelmäßig die grundlegende Absicht beim Erfassen von Tastenanschlag Nr. 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
user184365
quelle
28

bearbeiten: Dies funktioniert nur für IE ...

Mir ist klar, dass dies ein alter Beitrag ist, aber jemand könnte dies nützlich finden.

Die Schlüsselereignisse werden zugeordnet. Anstatt den Schlüsselcodewert zu verwenden, können Sie auch den Schlüsselwert verwenden, um die Lesbarkeit zu verbessern.

$(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
    }
});

Hier ist ein Spickzettel mit den zugeordneten Schlüsseln, die ich von diesem Blog erhalten habe Geben Sie hier die Bildbeschreibung ein

Kevin
quelle
5
Es gibt kein e.keyEigentum.
SLaks
3
Hmm, es sieht so aus, als wäre es eine IE-spezifische Eigenschaft. Es funktioniert für meine App im IE, aber nicht für Chrome. Ich schätze, ich benutze den Schlüsselcode.
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
quelle
1
Das ist die wahre Antwort. Der akzeptierte wird für einige Schlüssel funktionieren (wie Enter), aber für andere fehlschlagen (wie Supr, der von a verwechselt wird)
Oscar Foley
19
Dies ist eine direkte Einfügung aus der jQuery-Quelle und der Code, mit dem jQuery die Ereigniseigenschaft .which normalisiert.
Ian Clelland
@ Ian Clelland: Ich kann deinen Standpunkt nicht verstehen, funktioniert das richtig oder nicht? lol
Luca Filosofi
13
Es funktioniert; Ich bin mir sicher, denn jQuery verwendet genau diesen Code :) Wenn Sie jQuery bereits verfügbar haben, verwenden Sie es einfach - Sie müssen dies nicht in Ihrem eigenen Code haben.
Ian Clelland
1
@aSeptik: Die Frage war "Ich habe jQuery; wie bekomme ich die Taste gedrückt" - Ihre Antwort zeigt, wie jQuery es überhaupt bekommt. Mein Punkt war, dass jQuery diese Codezeile bereits enthält und sie daher nicht benötigt. Er kann nur benutzen event.which.
Ian Clelland
21

Testen Sie das hervorragende Plugin jquery.hotkeys, das Tastenkombinationen unterstützt:

$(document).bind('keydown', 'ctrl+c', fn);
user397198
quelle
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();
    });
});

Hoffe das kann dir helfen !!!


quelle
12

Dies ist so ziemlich die vollständige Liste der Schlüsselcodes:

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
quelle
6

Hier finden Sie eine ausführliche Beschreibung des Verhaltens verschiedener Browser unter http://unixpapa.com/js/key.html

Phil
quelle
2
Dies ist absolut die Seite, die jeder lesen sollte, der hoffnungslose Antworten gibt.
Tim Down
5

Ich werde nur den Lösungscode mit dieser Zeile ergänzen e.preventDefault();. Im Falle eines Eingabefeldes des Formulars kümmern wir uns nicht darum, bei Eingabe gedrückt zu senden

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
dzona
quelle
4

Fügen Sie verstecktes Senden hinzu, geben Sie nicht versteckt ein, sondern senden Sie es einfach mit style = "display: none". Hier ist ein Beispiel (unnötige Attribute aus dem Code entfernt).

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

Es akzeptiert nativ die Eingabetaste, benötigt kein JavaScript und funktioniert in jedem Browser.

Pedja
quelle
4

Hier ist eine jquery-Erweiterung, die die gedrückte Eingabetaste behandelt.

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

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

Ein funktionierendes Beispiel finden Sie hier http://jsfiddle.net/EnjB3/8/

Reid Evans
quelle
4

Hexe ;)

/*
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
quelle
4

Verwenden Sie event.keyund moderne JS!

Keine Nummerncodes mehr. Sie können den Schlüssel direkt überprüfen. Zum Beispiel "Enter", "LeftArrow", "r", oder "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...
    }
});

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

Sie sollten einen Firbug haben, um ein Ergebnis in der Konsole zu sehen

Manny
quelle
3

Einige Browser verwenden keyCode, andere verwenden welchen. Wenn Sie jQuery verwenden, können Sie diese zuverlässig verwenden, da jQuery die Dinge standardisiert. Tatsächlich,

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

    }
});
Hitesh Modha
quelle
2

Nach Kilians Antwort:

Wenn nur die Eingabetaste wichtig ist, ist Folgendes wichtig:

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

quelle
2

Der einfachste Weg, den ich mache, ist:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Rodolfo Jorge Nemer Nogueira
quelle
1
Es wäre besser, event.whichstatt zu verwenden event.keyCode. Von 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

Ich habe gerade ein Plugin für jQuery erstellt, das einfachere keypressEreignisse ermöglicht. Anstatt die Nummer finden und eingeben zu müssen, müssen Sie nur Folgendes tun:

Wie man es benutzt

  1. Fügen Sie den Code hinzu, den ich unten habe
  2. Führen Sie diesen Code aus:
$(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 
    }
});

So einfach ist das. Bitte beachten Sie, dass theKeyYouWantToFireAPressEventForist nicht eine Zahl, aber eine Zeichenkette (zB "a"Feuer , wenn Agedrückt wird, "ctrl"um Feuer , wenn gedrückt wird, oder im Fall einer Zahl, gerade , ohne Anführungszeichen. Das würde ausgelöst , wennCTRL (control)11 gedrückt wird.)

Das Beispiel / Code:

Weil die lange Version so ... na ja ... lang ist, habe ich einen PasteBin-Link dafür erstellt:
http://pastebin.com/VUaDevz1

Zach Barham
quelle
Sie können die Funktion viel kürzer und schneller machen, wenn Sie nicht Millionen von "if" -Vergleichen verwenden -> jsfiddle.net/BlaM/bcguctrx - Beachten Sie auch, dass beispielsweise openbracket und closebracket in a keine offenen / geschlossenen Klammern sind Deutsche Tastatur`.
BlaM
Diese Lösung hat mir gefallen. nett.
Jay
-9

Versuche dies:

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