javascript - ejemplo - KeyboardEvent.keyCode en desuso. ¿Qué significa esto en la práctica?

keycode numbers

Question

Según MDN, definitivamente no deberíamos estar usando la propiedad .keyCode. Está en desuso:

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

En la escuela W3, este hecho se minimiza y solo hay una nota al .keyCode que dice que .keyCode se proporciona solo por compatibilidad y que la última versión de la Especificación de Eventos DOM recomienda usar la propiedad .key lugar.

El problema es que .key no es compatible con los navegadores, entonces, ¿qué debemos usar? ¿Se me escapa algo?

Answer 1

Además, todos los https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode , which , charCode y keyIdentifier están en desuso:
charCode y keyIdentifier son características no estándar.
keyIdentifier se elimina a partir de Chrome 54 y Opera 41.0
keyCode devuelve 0, en caso de pulsación de tecla con caracteres normales en FF.

La propiedad clave :

 readonly attribute DOMString key

Contiene un valor de atributo clave correspondiente a la tecla presionada

Al momento de escribir esto, la propiedad key es compatible con todos los principales navegadores a partir de: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Excepto Internet Explorer 11 que tiene: identificadores de clave no estándar y comportamiento incorrecto con AltGraph. Más información
Si eso es importante y / o la compatibilidad con versiones anteriores lo es, puede usar la detección de funciones como en el siguiente código:

Observe que el valor de la key es diferente de keyCode o which propiedades contiene: contiene el nombre de la clave, no su código. Si su programa necesita códigos de caracteres, puede utilizar charCodeAt() . Para caracteres imprimibles individuales, puede usar charCodeAt() , si se trata de claves cuyos valores contienen múltiples caracteres como ArrowUp, las posibilidades son: está probando claves especiales y realiza acciones en consecuencia. Intente implementar una tabla de valores de claves y sus códigos correspondientes charCodeArr["ArrowUp"]=38 , charCodeArr["Enter"]=13 , charCodeArr[Escape]=27 ... y así sucesivamente, eche un vistazo a Key Valores y sus códigos correspondientes.

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

Es posible que desee considerar la compatibilidad con versiones anteriores, es decir, usar las propiedades heredadas mientras estén disponibles, y solo cuando se descarte cambie a las nuevas:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

Consulte también: los docs propiedad KeyboardEvent.code y algunos detalles más en esta answer .

Answer 2

MDN ya ha proporcionado una solución:

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

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Answer 3

TLDR: Sugeriría que use las nuevas propiedades event.key y event.code en lugar de las heredadas. IE y Edge admiten estas propiedades, pero aún no admiten los nuevos nombres de clave. Para ellos, hay un pequeño polyfill que los hace mostrar los nombres de clave / código estándar:

https://github.com/shvaikalesh/shim-keyboard-event-key

Llegué a esta pregunta buscando el motivo de la misma advertencia de MDN que OP. Después de buscar un poco más, el problema con keyCode vuelve más claro:

El problema con el uso de keyCode es que los teclados que no están en inglés pueden producir diferentes salidas e incluso los teclados con diferentes diseños pueden producir resultados inconsistentes. Además, estaba el caso de

Si lees las especificaciones del W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

En la práctica, keyCode y charCode son inconsistentes en todas las plataformas e incluso la misma implementación en diferentes sistemas operativos o el uso de diferentes localizaciones.

Se profundiza describiendo lo que estaba mal con keyCode : https://www.w3.org/TR/uievents/#legacy-key-attributes

Estas características nunca se especificaron formalmente y las implementaciones actuales del navegador varían de manera significativa. La gran cantidad de contenido heredado, incluidas las bibliotecas de scripts, que se basa en la detección del agente de usuario y actúa en consecuencia significa que cualquier intento de formalizar estos atributos y eventos heredados correría el riesgo de romper tanto contenido como lo arreglaría o habilitaría. Además, estos atributos no son adecuados para uso internacional, ni abordan problemas de accesibilidad.

Entonces, después de establecer la razón por la cual se reemplazó el keyCode heredado, echemos un vistazo a lo que debe hacer hoy:

1. Todos los navegadores modernos admiten las nuevas propiedades ( key y code ).
2. IE y Edge admiten una versión anterior de la especificación, que tiene diferentes nombres para algunas claves. Puede usar una cuña para ello: https://github.com/shvaikalesh/shim-keyboard-event-key (o enrolle la suya, de todos modos es bastante pequeña)
3. Edge ha corregido este error en la última versión (probablemente se lanzará en abril de 2018): https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. Consulte la lista de claves de eventos que puede usar: https://www.w3.org/TR/uievents-key/

Answer 4

Tiene tres formas de manejarlo, ya que está escrito en el enlace que compartió.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

debes contemplarlos, esa es la forma correcta si quieres soporte para varios navegadores.

Podría ser más fácil si implementa algo como esto.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};