jQuery Event Keypress: quale tasto è stato premuto?

Con jQuery, come faccio a sapere quale tasto è stato premuto quando eseguo il bind all’evento keypress?

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

Voglio triggersre un invio quando viene premuto INVIO .

[Aggiornare]

Anche se ho trovato la (o meglio: una) risposta, sembra che ci sia un certo margine di variazione;)

C’è una differenza tra keyCode e which – soprattutto se sto cercando solo ENTER , che non sarà mai una chiave unicode?

Alcuni browser forniscono una proprietà e altri forniscono l’altra?

In realtà questo è meglio:

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

Prova questo

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

Se si utilizza l’interfaccia utente di jQuery sono disponibili traduzioni per codici chiave comuni. In ui / ui / ui.core.js :

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

Ci sono anche alcune traduzioni in tests / simulate / jquery.simulate.js ma non ho trovato nessuna nella libreria JS principale. Intendiamoci, ho semplicemente ingannato le fonti. Forse c’è un altro modo per sbarazzarsi di questi numeri magici.

Puoi anche utilizzare String.charCodeAt e .fromCharCode:

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

Dato che stai usando jQuery, devi assolutamente usare .which. Sì, diversi browser impostano proprietà diverse, ma jQuery li normalizzerà e imposterà il valore .which in ciascun caso. Vedi la documentazione all’indirizzo http://api.jquery.com/keydown/, che afferma:

Per determinare quale tasto è stato premuto, possiamo esaminare l’object evento che viene passato alla funzione del gestore. Mentre i browser utilizzano proprietà diverse per memorizzare queste informazioni, jQuery normalizza la proprietà .which in modo che possiamo usarla in modo affidabile per recuperare il codice chiave.

… questo esempio impedisce l’invio del modulo (regolarmente l’intenzione di base quando si acquisisce il tasto # 13):

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

modifica: funziona solo per IE …

Mi rendo conto che questo è un vecchio post, ma qualcuno potrebbe trovarlo utile.

Gli eventi chiave sono mappati, quindi, anziché utilizzare il valore del codice tasto, puoi anche utilizzare il valore della chiave per renderlo un po ‘più leggibile.

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

Ecco un cheat sheet con i tasti mappati che ho preso da questo blog inserisci la descrizione dell'immagine qui

Scopri l’eccellente plug-in jquery.hotkeys che supporta le combinazioni di tasti:

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

Spero che questo possa aiutarti !!!

Ok, ero cieco:

 e.which 

conterrà il codice ASCII della chiave.

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

Ecco una descrizione dettagliata del comportamento di vari browser http://unixpapa.com/js/key.html

Questo è praticamente l’elenco completo dei codici chiave:

 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" 

e.preventDefault(); solo il codice della soluzione con questa riga e.preventDefault(); . In caso di campo di input del modulo non ci occupiamo di inviare su invio premuto

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

Aggiungi sottomissione nascosta, non digita nascosto, invia semplicemente con style = “display: none”. Ecco un esempio (attributi non necessari rimossi dal codice).

 

accetterà la chiave di invio in modo nativo, senza bisogno di JavaScript, funziona in ogni browser.

Ecco un’estensione jquery che gestirà il tasto invio premuto.

 (function ($) { $.prototype.enterPressed = function (fn) { $(this).keyup(function (e) { if ((e.keyCode || e.which) == 13) { fn(); } }); }; }(jQuery || {})); $("#myInput").enterPressed(function() { //do something }); 

Un esempio di lavoro può essere trovato qui http://jsfiddle.net/EnjB3/8/

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

dovresti avere Firbug per vedere un risultato in console

Strega;)

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

Alcuni browser usano keyCode, altri usano quali. Se stai usando jQuery, puoi usare in modo affidabile quale jQuery standardizza le cose. In realtà,

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

Secondo la risposta di Kilian:

Se solo inserire la pressione di un tasto è importante:

 

Il modo più semplice che faccio è:

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

Ho appena creato un plugin per jQuery che consente eventi di keypress più semplici. Invece di dover trovare il numero e inserirlo, tutto ciò che devi fare è questo:

Come usarlo

  1. Includi il codice che ho di seguito
  2. Esegui questo codice:
 $(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 } }); 

È così semplice. Si noti che theKeyYouWantToFireAPressEventFor non è un numero, ma una stringa (es. "a" per sparare quando si preme A, "ctrl" per sparare quando si preme CTRL (controllo) , o, nel caso di un numero, solo 1 , no virgolette, che si triggersno quando viene premuto 1 ).

L’esempio / codice:

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

The Pressed Key:

Usa event.key e il moderno JS!

Nessun codice numerico più. Puoi controllare direttamente la chiave. Ad esempio "Enter" , "LeftArrow" , "r" o "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

Browser supportati

Prova questo:

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