.el código de la tecla vs.que


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

Si estoy escuchando un evento de pulsación de teclado, ¿debería usar .keyCode o .which para determinar si se presionó la tecla Enter?

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 .which en lugar de .keyCode. ¿Cuál es la diferencia? ¿Es uno más amigable para el navegador que el otro?

Author: Xufox, 2010-12-17

7 answers

Algunos navegadores usan keyCode, otros usan which. Si está utilizando jQuery, puede usar which de manera confiable ya que jQuery estandariza las cosas. Más aquí.


Si no estás usando jQuery, puedes hacer esto:

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

O alternativamente:

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

...que maneja la posibilidad de que e.which podría ser 0 (restaurando ese 0 al final, usando el curiosamente poderoso operador || de JavaScript).

 177
Author: T.J. Crowder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-24 16:22:59

JQuery normaliza event.which dependiendo de si event.which, event.keyCode o event.charCode es compatible con 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 .which es que jQuery también lo hace para los clics del ratón:

// 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 ) ));
}
 29
Author: David Tang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-17 14:59:31

Si se queda en Javascript vanilla, tenga en cuenta que keyCode ahora está obsoleto y se eliminará:

Esta característica ha sido eliminada de los estándares Web. Aunque algunos navegadores todavía pueden admitirlo, está en proceso de ser eliminado. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para guiar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier tim

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

En su lugar use: .clave o .código dependiendo del 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 están implementados en navegadores modernos.

 10
Author: slykat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-14 19:49:38

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

En un evento keypress, 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 mayúscula. (es decir, charCode tiene en cuenta si la tecla mayús se mantiene pulsada). De lo contrario, el código de la tecla presionada se almacena en keyCode. Código clave 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 la propiedad which. Los caracteres introducidos a través de un IME no se registran a través de keyCode o charCode.

 6
Author: Leo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-22 07:05:36

Una robusta biblioteca Javascript para capturar la entrada del teclado y las combinaciones de teclas introducidas. 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 .

El siguiente especiales se pueden utilizar las teclas de accesos directos: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete y f1 por f19.

 2
Author: 小弟调调,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-08 01:46:37

Recomendaría event.key actualmente. MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCode y event.which ambos tienen desagradables advertencias obsoletas en la parte superior de sus páginas de 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.key parece implementarse de forma idéntica en todos los navegadores. Para teclas de control (tab, enter, escape, etc.), event.key tiene el mismo valor en Chrome/FF/Safari/Opera, pero un valor diferente en IE10/11/Edge (aparentemente, los IEs usan una versión anterior de la especificación, pero coinciden entre sí a partir del 14 de enero de 2018).

Para las claves alfanuméricas una comprobación sería algo así como:

event.key === 'a'

Para los caracteres de control necesitas hacer algo como:

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

Usé el ejemplo aquí para probar en múltiples navegadores (tuve que abrir en codepen y editar para que funcione con IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

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

 0
Author: Akrikos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 16:14:42

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

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support
 0
Author: Pankaj Chauhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-02 09:39:46