Avec jQuery, comment savoir quelle touche a été enfoncée lorsque je me lie à l'événement de pression de touche?

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

Je veux déclencher une soumission lorsque vous ENTERappuyez sur.

[Mise à jour]

Même si j'ai trouvé la réponse (ou mieux: une) moi-même, il semble y avoir une certaine marge de variation;)

Y a-t-il une différence entre keyCodeet which- surtout si je cherche juste ENTER, qui ne sera jamais une clé unicode?

Certains navigateurs fournissent-ils une propriété et d'autres fournissent-ils l'autre?

En fait, c'est mieux:

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

Essaye ça

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

Si vous utilisez jQuery UI, vous avez des traductions pour les codes de clé communs. Dans ui / ui / ui.core.js :

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

Il y a aussi quelques traductions dans tests / simulate / jquery.simulate.js mais je n'ai pas pu en trouver dans la bibliothèque JS principale. Remarquez, je n'ai fait que grpper les sources. Il existe peut-être un autre moyen de se débarrasser de ces nombres magiques.

Vous pouvez également utiliser String.charCodeAt et .fromCharCode:

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

Étant donné que vous utilisez jQuery, vous devez absolument utiliser .which. Oui, différents navigateurs définissent des propriétés différentes, mais jQuery les normalisera et définira la valeur .which dans chaque cas. Voir la documentation sur http://api.jquery.com/keydown/ il indique:

Pour déterminer quelle touche a été enfoncée, nous pouvons examiner l'objet événement transmis à la fonction de gestionnaire. Alors que les navigateurs utilisent différentes propriétés pour stocker ces informations, jQuery normalise la propriété .which afin que nous puissions l'utiliser de manière fiable pour récupérer le code clé.

... cet exemple empêche la soumission du formulaire (régulièrement l'intention de base lors de la capture de la touche # 13):

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

edit: Cela ne fonctionne que pour IE ...

Je me rends compte que c'est une ancienne publication, mais quelqu'un pourrait trouver cela utile.

Les événements clés sont mappés, donc au lieu d'utiliser la valeur du code clé, vous pouvez également utiliser la valeur clé pour la rendre un peu plus lisible.

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

Voici une feuille de triche avec les clés mappées que j'ai obtenues de ce blog

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

Découvrez l'excellent plugin jquery.hotkeys qui prend en charge les combinaisons de touches:

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

J'espère que cela peut vous aider !!!

C'est à peu près la liste complète des codes clés:

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"

D'accord, j'étais aveugle:

e.which

contiendra le code ASCII de la clé.

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

Voici une description détaillée du comportement des différents navigateurs http://unixpapa.com/js/key.html

Je vais simplement compléter le code de solution avec cette ligne e.preventDefault();. En cas de champ de saisie du formulaire nous n'assistons pas à la soumission lors de la saisie pressée

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

Ajoutez une soumission cachée, ne tapez pas caché, envoyez simplement avec style = "display: none". Voici un exemple (suppression des attributs inutiles du code).

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

il acceptera la clé d'entrée en natif, pas besoin de JavaScript, fonctionne dans tous les navigateurs.

Voici une extension jquery qui gérera la touche entrée pressée.

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

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

Un exemple de travail peut être trouvé ici http://jsfiddle.net/EnjB3/8/

Sorcière ;)

/*
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);

Démo: http://jsfiddle.net/molokoloco/hgXyq/24/

Utilisez event.keyet JS moderne!

Plus de codes numériques . Vous pouvez vérifier la clé directement. Par exemple "Enter", "LeftArrow", "r"ou "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...
    }
});

Documents Mozilla

Navigateurs pris en charge

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

});

vous devriez avoir firbug pour voir un résultat dans la console

Certains navigateurs utilisent keyCode, d'autres utilisent lesquels. Si vous utilisez jQuery, vous pouvez l'utiliser de manière fiable car jQuery standardise les choses. Réellement,

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

    }
});

Selon la réponse de Kilian:

Si seule la touche entrée est importante:

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

La façon la plus simple que je fais est:

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

Je viens de faire un plugin pour jQuery qui permet plus facilement keypress événements . Au lieu d'avoir à trouver le numéro et à le mettre, tout ce que vous avez à faire est le suivant:

Comment l'utiliser

1. Inclure le code que j'ai ci-dessous
2. Exécutez ce code:

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

C'est si simple. Veuillez noter qu'il netheKeyYouWantToFireAPressEventFor s'agit pas d' un nombre, mais d'une chaîne (par exemple, "a"pour déclencher lorsque vous Aappuyez sur, "ctrl"pour déclencher lorsque vous appuyez sur, ou, dans le cas d'un nombre, simplement , pas de guillemets. Cela se déclencherait lorsque vous appuyez sur).CTRL (control)11

L'exemple / 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>

Parce que la version longue est tellement ... eh bien ... longue, j'ai fait un lien PasteBin pour elle:
http://pastebin.com/VUaDevz1

Les event.keyCodeet event.whichsont obsolètes. Voir la réponse @Gibolt ci-dessus ou consultez la documentation: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key devrait être utilisé à la place

keypressl'événement est également obsolète: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Essaye ça:

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