.keyCode vs. .which

Pensé que esto sería respondido en algún lugar en Stack Overflow, pero no puedo encontrarlo.

Si estoy escuchando un evento de pulsación de tecla, ¿debería usar .keyCodeo .whichpara determinar si se presionó la tecla Intro?

Siempre he hecho algo como lo siguiente:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

Pero estoy viendo ejemplos que usan en .whichlugar de .keyCode. ¿Cual es la diferencia? ¿Es uno más compatible con todos los navegadores que el otro?

Nota: a continuación La respuesta fue escrito en 2010. Aquí, muchos años después, tanto keyCodey whichse está desfasada y en key(para la clave lógica) y code(para la ubicación física de la llave). Pero tenga en cuenta que IE no es compatible code, y su compatibilidad keyse basa en una versión anterior de la especificación, por lo que no es del todo correcto. Mientras escribo esto, el Edge actual basado en EdgeHTML y Chakra tampoco es compatible code, pero Microsoft está implementando su reemplazo basado en Blink y V8 para Edge, que presumiblemente sí lo hará / lo hará.

Algunos navegadores usan keyCode, otros usan which.

Si está utilizando jQuery, puede utilizarlo de manera confiable whichya que jQuery estandariza las cosas ; Más aquí.

Si no está utilizando jQuery, puede hacer esto:

var key = 'which' in e ? e.which : e.keyCode;

O alternativamente:

var key = e.which || e.keyCode || 0;

... que maneja la posibilidad que e.whichpodría ser 0(al restaurar eso 0al final, usando el ||operador curiosamente poderoso de JavaScript ).

jQuery normaliza event.whichen función de si event.which, event.keyCodeo event.charCodeestá soportado por el navegador:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

Un beneficio adicional de .whichjQuery es que también lo hace para los clics del mouse:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Si permanece en Javascript vainilla, tenga en cuenta que keyCode ahora está en desuso y se eliminará:

Esta característica se ha eliminado de los estándares web. Aunque algunos navegadores aún pueden soportarlo, está en proceso de ser eliminado. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para guiar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

En su lugar, use: .key o .code según el comportamiento que desee: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Ambos se implementan en navegadores modernos.

mira esto: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

En un evento de pulsación de tecla, el valor Unicode de la tecla presionada se almacena en la propiedad keyCode o charCode, nunca en ambas. Si la tecla presionada genera un carácter (por ejemplo, 'a'), charCode se establece en el código de ese carácter, respetando la letra mayúscula. (es decir, charCode tiene en cuenta si la tecla Mayús se mantiene presionada). De lo contrario, el código de la tecla presionada se almacena en keyCode. keyCode siempre se establece en los eventos keydown y keyup. En estos casos, charCode nunca se establece. Para obtener el código de la clave independientemente de si se almacenó en keyCode o charCode, consulte qué propiedad. Los caracteres ingresados ​​a través de un IME no se registran a través de keyCode o charCode.

Lo recomendaría event.keyactualmente. Documentos de MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodey event.whichambos tienen advertencias desaprobadas desagradables en la parte superior de sus páginas MDN:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / which

Para las claves alfanuméricas, event.keyparece implementarse de manera idéntica en todos los navegadores. Para las teclas de control (tab, enter, escape, etc.), event.keytiene el mismo valor en Chrome / FF / Safari / Opera pero un valor diferente en IE10 / 11 / Edge (los IE aparentemente usan una versión anterior de la especificación pero coinciden entre sí como del 14 de enero de 2018).

Para las teclas alfanuméricas, un cheque se vería así:

event.key === 'a'

Para los personajes de control, deberías hacer algo como:

event.key === 'Esc' || event.key === 'Escape'

Utilicé el ejemplo aquí para probar en varios navegadores (tuve que abrir en codepen y editar para que funcione con IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ código

event.code se menciona en una respuesta diferente como una posibilidad, pero IE10 / 11 / Edge no lo implementa, por lo que está disponible si desea soporte de IE.

Una robusta biblioteca Javascript para capturar la entrada del teclado y las combinaciones de teclas ingresadas. No tiene dependencias.

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

teclas de acceso rápido comprende los siguientes modificadores: ⇧, shift, option, ⌥, alt, ctrl, control, command, y ⌘.

Las siguientes teclas especiales se pueden utilizar para los accesos directos: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletey f1a través f19.

En Firefox, la propiedad keyCode no funciona en el evento onkeypress (solo devolverá 0). Para una solución de navegador cruzado, use la propiedad which junto con keyCode, por ejemplo:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support