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?

Eigentlich ist das besser:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

Versuche dies

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

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

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.

... 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);
   }
});

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

 // 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');
     }
 });

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

$(document).bind('keydown', 'ctrl+c', fn);

$(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 !!!

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"

Okay, ich war blind:

e.which

enthält den ASCII-Code des Schlüssels.

Siehe https://developer.mozilla.org/En/DOM/Event.which

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

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
 }

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.

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/

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/

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

$(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

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){

    }
});

Nach Kilians Antwort:

Wenn nur die Eingabetaste wichtig ist, ist Folgendes wichtig:

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

Der einfachste Weg, den ich mache, ist:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

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:

function getPressedKey(e){var a,s=e.keyCode||e.which,c=65,r=66,o=67,l=68,t=69,f=70,n=71,d=72,i=73,p=74,u=75,h=76,m=77,w=78,k=79,g=80,b=81,v=82,q=83,y=84,j=85,x=86,z=87,C=88,K=89,P=90,A=32,B=17,D=8,E=13,F=16,G=18,H=19,I=20,J=27,L=33,M=34,N=35,O=36,Q=37,R=38,S=40,T=45,U=46,V=91,W=92,X=93,Y=48,Z=49,$=50,_=51,ea=52,aa=53,sa=54,ca=55,ra=56,oa=57,la=96,ta=97,fa=98,na=99,da=100,ia=101,pa=102,ua=103,ha=104,ma=105,wa=106,ka=107,ga=109,ba=110,va=111,qa=112,ya=113,ja=114,xa=115,za=116,Ca=117,Ka=118,Pa=119,Aa=120,Ba=121,Da=122,Ea=123,Fa=114,Ga=145,Ha=186,Ia=187,Ja=188,La=189,Ma=190,Na=191,Oa=192,Qa=219,Ra=220,Sa=221,Ta=222;return s==Fa&&(a="numlock"),s==Ga&&(a="scrolllock"),s==Ha&&(a="semicolon"),s==Ia&&(a="equals"),s==Ja&&(a="comma"),s==La&&(a="dash"),s==Ma&&(a="period"),s==Na&&(a="slash"),s==Oa&&(a="grave"),s==Qa&&(a="openbracket"),s==Ra&&(a="backslash"),s==Sa&&(a="closebracket"),s==Ta&&(a="singlequote"),s==B&&(a="ctrl"),s==D&&(a="backspace"),s==E&&(a="enter"),s==F&&(a="shift"),s==G&&(a="alt"),s==H&&(a="pause"),s==I&&(a="caps"),s==J&&(a="esc"),s==L&&(a="pageup"),s==M&&(a="padedown"),s==N&&(a="end"),s==O&&(a="home"),s==Q&&(a="leftarrow"),s==R&&(a="uparrow"),s==S&&(a="downarrow"),s==T&&(a="insert"),s==U&&(a="delete"),s==V&&(a="winleft"),s==W&&(a="winright"),s==X&&(a="select"),s==Z&&(a=1),s==$&&(a=2),s==_&&(a=3),s==ea&&(a=4),s==aa&&(a=5),s==sa&&(a=6),s==ca&&(a=7),s==ra&&(a=8),s==oa&&(a=9),s==Y&&(a=0),s==ta&&(a=1),s==fa&&(a=2),s==na&&(a=3),s==da&&(a=4),s==ia&&(a=5),s==pa&&(a=6),s==ua&&(a=7),s==ha&&(a=8),s==ma&&(a=9),s==la&&(a=0),s==wa&&(a="times"),s==ka&&(a="add"),s==ga&&(a="minus"),s==ba&&(a="decimal"),s==va&&(a="devide"),s==qa&&(a="f1"),s==ya&&(a="f2"),s==ja&&(a="f3"),s==xa&&(a="f4"),s==za&&(a="f5"),s==Ca&&(a="f6"),s==Ka&&(a="f7"),s==Pa&&(a="f8"),s==Aa&&(a="f9"),s==Ba&&(a="f10"),s==Da&&(a="f11"),s==Ea&&(a="f12"),s==c&&(a="a"),s==r&&(a="b"),s==o&&(a="c"),s==l&&(a="d"),s==t&&(a="e"),s==f&&(a="f"),s==n&&(a="g"),s==d&&(a="h"),s==i&&(a="i"),s==p&&(a="j"),s==u&&(a="k"),s==h&&(a="l"),s==m&&(a="m"),s==w&&(a="n"),s==k&&(a="o"),s==g&&(a="p"),s==b&&(a="q"),s==v&&(a="r"),s==q&&(a="s"),s==y&&(a="t"),s==j&&(a="u"),s==x&&(a="v"),s==z&&(a="w"),s==C&&(a="x"),s==K&&(a="y"),s==P&&(a="z"),s==A&&(a="space"),a}

$(document).keydown(function(e) {
  $("#key").text(getPressedKey(e));
  console.log(getPressedKey(e));
  if (getPressedKey(e)=="space") {
    e.preventDefault();
  }
  if (getPressedKey(e)=="backspace") {
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The Pressed Key: <span id=key></span></p>

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

Die event.keyCodeund event.whichsind entzogen. Siehe @ Gibolt-Antwort oben oder überprüfen Sie die Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key sollte stattdessen verwendet werden

keypressDie Veranstaltung ist ebenfalls veraltet: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Versuche dies:

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