it-swarm.com.de

jQuery Event Keypress: Welche Taste wurde gedrückt?

Wie finde ich mit jQuery heraus, welche Taste gedrückt wurde, als ich an das Ereignis keypress gebunden habe?

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

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

[Update]

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

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

Stellen einige Browser eine Eigenschaft und andere die andere bereit?

699
BlaM

Eigentlich ist das besser:

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

Versuche dies

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

Wenn Sie die jQuery-Benutzeroberfläche verwenden, gibt es Ü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 Kern-JS-Bibliothek finden. Wohlgemerkt, ich habe nur die Quellen gegriffen. Vielleicht gibt es eine andere Möglichkeit, diese magischen Zahlen loszuwerden.

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

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
60
user35612

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

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 Eigenschaft .which, sodass wir sie zuverlässig zum Abrufen des Schlüsselcodes verwenden können. 

39

... dieses Beispiel verhindert die Übermittlung von Formularen (regelmäßig die grundlegende Absicht bei der Erfassung des Tastenanschlags # 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
31
user184365
 // 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');
     }
 });
26
Luca Filosofi

edit: Das funktioniert nur für IE ...

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

Die Schlüsselereignisse werden zugeordnet. Statt den Schlüsselcode zu verwenden, können Sie den Schlüsselwert auch verwenden, um ihn lesbarer zu machen.

$(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.enter image description here

25
Kevin

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

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

14
rajakvk

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"
11
Ivan

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

6
Phil

Okay, ich war blind:

e.which

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

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

6
BlaM

Ich füge nur den Lösungscode mit dieser Zeile e.preventDefault();..__ hinzu. Im Falle eines Eingabefelds des Formulars nehmen wir nicht an, wenn Sie die Eingabetaste drücken

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

Fügen Sie ein verstecktes Senden hinzu, und geben Sie keinen versteckten Typ ein. Hier ist ein Beispiel (unnötige Attribute aus Code entfernt).

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

es akzeptiert die Eingabetaste nativ, keine Notwendigkeit für JavaScript, funktioniert in jedem Browser.

4
Pedja

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 Arbeitsbeispiel finden Sie hier http://jsfiddle.net/EnjB3/8/

4
Reid Evans

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/

4
molokoloco

Einige Browser verwenden keyCode, andere verwenden welchen. Wenn Sie jQuery verwenden, können Sie das, was als jQuery standardisiert, zuverlässig verwenden. Tatsächlich,

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

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

});

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

3
manny

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

Wie man es benutzt

  1. Gib den Code ein, 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 theKeyYouWantToFireAPressEventFor keine Zahl ist , sondern eine Zeichenfolge (z. B. "a", die ausgelöst werden soll, wenn A gedrückt wird, "ctrl" um zu feuern, wann CTRL (control) gedrückt wird, oder im Falle einer Zahl nur 1, keine Anführungszeichen. Das würde feuern, wenn 1 wird gedrückt.)

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 ... nun ja ... lang ist, habe ich dafür einen Pastebin-Link erstellt:
http://Pastebin.com/VUaDevz1

2
Zach Barham

Der einfachste Weg, den ich mache, ist:

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

Laut Kilians Antwort:

Wenn nur Eingabe Tastendruck ist wichtig:

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

Verwenden Sie event.key und modernes 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

1
Gibolt