jQuery Event Keypress: ¿Qué tecla se presionó?

706

Con jQuery, ¿cómo puedo saber qué tecla se presionó cuando me uní al evento de pulsación de tecla?

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

Quiero activar un envío cuando ENTERse presiona.

[Actualizar]

A pesar de que encontré la respuesta (o mejor: una), parece que hay margen de variación;)

¿Hay alguna diferencia entre keyCodey which, especialmente si solo estoy buscando ENTER, que nunca será una clave Unicode?

¿Algunos navegadores proporcionan una propiedad y otros proporcionan la otra?

BlaM
fuente
295
** Si alguien ha llegado a esto desde Google (como lo hice yo), sepa que "keyup" en lugar de "keypress" funciona en Firefox, IE y Chrome. "presionar teclas" aparentemente solo funciona en Firefox.
Tyler el
17
también, "keydown" funciona mejor que "keyup" para activar un evento DESPUÉS de que la tecla ha sido presionada (obviamente), pero esto es importante si dice que desea activar un evento en el SEGUNDO espacio de retroceso si un área de texto está vacía
Tyler
12
En cuanto a e.keyCode VS e.which ... De mis pruebas, Chrome e IE8: el controlador keypress () solo se activará para caracteres normales (es decir, no Arriba / Abajo / Ctrl), y tanto e.keyCode como e. que devolverá el código ASCII. Sin embargo, en Firefox, todas las teclas activarán la pulsación de tecla (), PERO: para caracteres normales e.que devolverá el código ASCII y e.keyCode devolverá 0, y para caracteres especiales (por ejemplo, Arriba / Abajo / Ctrl) e.keyCode devolverá el código del teclado, y e.que devolverá 0. Qué divertido.
jackocnr
44
Advertencia: NO use el del código de google. El autor de jquery envió un parche, que solo está en el repositorio de github (y también en la bifurcación de John Resig): github.com/tzuryby/jquery.hotkeys . El del código de google se comporta mal cuando se vincula más de un evento clave al mismo nodo dom. El nuevo lo resuelve.
Daniel Ribeiro
44
"keyup" se activará muy tarde cuando, por ejemplo, presione una tecla durante mucho tiempo. Vea aquí jsbin.com/aquxit/3/edit, así que el keydown es el camino a seguir
Toskan

Respuestas:

844

En realidad esto es mejor:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Eran Galperin
fuente
84
if ((e.keyCode || e.which) == 13)? ;)
Kezzer
49
Según un comentario más abajo en esta página, jQuery se normaliza para que 'cuál' se defina en el objeto de evento cada vez. Por lo tanto, la comprobación de 'keyCode' debería ser innecesaria.
Ztyx
197
¿Por qué el enorme recuento de votos? La pregunta es sobre jQuery, que normaliza estas cosas, por lo que no hay necesidad de usar nada más quee.which cualquier evento que esté usando.
Tim Down
48
@Tim: Por desgracia, acabo de probar esto con Firefox usando api.jquery.com/keypress : cuando presiono <Tab>, e.whichno está configurado (permanece 0), pero e.keyCodees ( 9). Consulte stackoverflow.com/questions/4793233/… por qué esto es importante.
Marcel Korpel
3
@Marcel: Sí, el manejo de claves de jQuery tiene defectos y ese es un ejemplo desafortunado, pero para la tecla Enter, que es de lo que se trata esta pregunta, la situación es extremadamente simple.
Tim Down
133

Prueba esto

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Vladimir Prudnikov
fuente
55
@VladimirPrudnikov ¡Oh, oh, Ahhhh! Ahh! había mac's en todas partes en ese enlace: ¡la humanidad!
Ben DeMott
1
Bueno, también lanzamos una nueva versión con la aplicación de Windows ... echa un vistazo a snippets.me
Vladimir Prudnikov
2
@VladimirPrudnikov ¿qué tal una versión de Linux?
Arda
@Arda no tenemos planes para la versión de Linux. Habrá una aplicación web y una API pública, por lo que puede haber alguien que la cree :)
Vladimir Prudnikov
1
Ja, ja, ja, una herramienta de desarrollo sin planes para Linux. ¡Rico!
Ziggy
61

Si está utilizando jQuery UI, tiene traducciones para códigos de teclas comunes. En ui / ui / ui.core.js :

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

También hay algunas traducciones en tests / simulate / jquery.simulate.js pero no pude encontrar ninguna en la biblioteca central de JS. Eso sí, me limité a buscar las fuentes. Quizás hay alguna otra forma de deshacerse de estos números mágicos.

También puede utilizar String.charCodeAt y .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
usuario35612
fuente
13
La corrección es * $. Ui.keyCode.ENTER ** no * $. KeyCode.ENTER - ¡funciona de maravilla aunque gracias por la propina!
daniellmb
Uncaught TypeError: String.charCodeAt is not a functionCreo que querías decir'\r'.charCodeAt(0) == 13
Patrick Roberts el
39

Dado que está utilizando jQuery, debería usar absolutamente .which. Sí, diferentes navegadores establecen diferentes propiedades, pero jQuery las normalizará y establecerá el valor .wh en cada caso. Consulte la documentación en http://api.jquery.com/keydown/ que dice:

Para determinar qué tecla se presionó, podemos examinar el objeto de evento que se pasa a la función de controlador. Mientras que los navegadores usan diferentes propiedades para almacenar esta información, jQuery normaliza la propiedad .which para que podamos usarla de manera confiable para recuperar el código clave.

Frank Schwieterman
fuente
2
Por lo que he visto usando event.which y tratando de comparar con $ .ui.keyCode resulta en un comportamiento incierto. Específicamente la tecla [L] en minúsculas que se asigna a $ .ui.keyCode.NUMPAD_ENTER. Lindo.
Danny
44
¿Tienes una réplica que demuestre este error? Es preferible informar esto a los propietarios de jQuery en lugar de intentar reimplementar su trabajo.
Frank Schwieterman
31

... este ejemplo evita el envío de formularios (regularmente, la intención básica al capturar pulsaciones de teclas # 13):

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

editar: Esto solo funciona para IE ...

Me doy cuenta de que esta es una publicación antigua, pero alguien puede encontrar esto útil.

Los eventos clave se asignan, por lo que en lugar de usar el valor del código clave, también puede usar el valor clave para hacerlo un poco más legible.

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

Aquí hay una hoja de trucos con las teclas asignadas que obtuve de este blog ingrese la descripción de la imagen aquí

Kevin
fuente
55
No hay e.keypropiedad
SLaks
3
Hmm, parece que es una propiedad específica de IE. Funciona para mi aplicación en IE pero no para Chrome. Supongo que estoy usando el código clave.
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
fuente
1
Esta es la verdadera respuesta. La aceptada funcionará para algunas teclas (como enter) pero fallará para otras (como supr que se confundirá con a.)
Oscar Foley
19
Esta es una pasta directa de la fuente jQuery, y es el código que jQuery usa para normalizar la propiedad de evento .which.
Ian Clelland
@ Ian Clelland: no puedo entender tu punto, ¿está funcionando bien o no? lol
Luca Filosofi
13
Funciona; Estoy seguro de eso, porque jQuery usa exactamente ese código :) Si ya tiene jQuery disponible, simplemente utilícelo, no necesita tener esto en su propio código.
Ian Clelland
1
@aSeptik: La pregunta era "Tengo jQuery; ¿cómo hago para presionar la tecla"? Su respuesta muestra cómo jQuery la obtiene en primer lugar. Mi punto era que dado que jQuery ya contiene esta línea de código, no la necesita. Él solo puede usar event.which.
Ian Clelland
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();
    });
});

Espero que esto te pueda ayudar !!!


fuente
12

Esta es más o menos la lista completa de códigos clave:

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

Aquí hay una descripción detallada del comportamiento de varios navegadores http://unixpapa.com/js/key.html

Phil
fuente
2
Esta es absolutamente la página que todos deberían leer dando respuestas desesperadas.
Tim Down
5

Solo complementaré el código de solución con esta línea e.preventDefault();. En el caso del campo de entrada del formulario, no asistimos para enviar al entrar presionado

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

Agregue envío oculto, no escriba oculto, simplemente envíe con estilo = "display: none". Aquí hay un ejemplo (se eliminaron atributos innecesarios del código).

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

aceptará la tecla enter de forma nativa, no necesita JavaScript, funciona en todos los navegadores.

Pedja
fuente
4

Aquí hay una extensión jquery que manejará la tecla enter presionada.

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

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

Un ejemplo de trabajo se puede encontrar aquí http://jsfiddle.net/EnjB3/8/

Reid Evans
fuente
4

Bruja;)

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

Demostración: http://jsfiddle.net/molokoloco/hgXyq/24/

molokoloco
fuente
4

Uso event.keyy moderno JS!

Ya no hay códigos numéricos . Puede verificar la clave directamente. Por ejemplo "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...
    }
});

Documentos de Mozilla

Navegadores Soportados

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

});

deberías tener firbug para ver un resultado en la consola

manny
fuente
3

Algunos navegadores usan keyCode, otros usan cuál. Si está utilizando jQuery, puede utilizarlo de manera confiable, ya que jQuery estandariza las cosas. Realmente,

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

    }
});
Hitesh Modha
fuente
2

Según la respuesta de Kilian:

Si solo ingresa la tecla, es importante:

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

fuente
2

La forma más fácil que hago es:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Rodolfo Jorge Nemer Nogueira
fuente
1
Sería mejor usar en event.whichlugar de event.keyCode. Desde 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

Acabo de hacer un complemento para jQuery que permite más fácil keypress eventos . En lugar de tener que encontrar el número y ponerlo, todo lo que tiene que hacer es esto:

Cómo usarlo

  1. Incluye el código que tengo a continuación
  2. Ejecute este código:
$(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 
    }
});

Es así de simple. Tenga en cuenta que notheKeyYouWantToFireAPressEventFor es un número, sino una cadena (por ejemplo, disparar cuando se presiona, disparar cuando se presiona o, en el caso de un número, simplemente , sin comillas. Eso se dispararía cuando"a"A"ctrl"CTRL (control)11 se presiona).

El ejemplo / código:

Debido a que la versión larga es tan ... bueno ... larga, he creado un enlace PasteBin para ella:
http://pastebin.com/VUaDevz1

Zach Barham
fuente
Puede hacer que la función sea mucho más corta y rápida si no utiliza millones de comparaciones "si" -> jsfiddle.net/BlaM/bcguctrx - También tenga en cuenta que, por ejemplo, openbracket y closebracket no son paréntesis abiertos / cerrados Teclado alemán
BlaM
Me gustó esta solución. bonito.
Jay
-9

Prueba esto:

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