KeyboardEvent.keyCode obsoleto. ¿Qué significa esto en la práctica?

Según MDN, definitivamente no deberíamos usar la .keyCodepropiedad. 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 margen que dice que .keyCodese proporciona solo por compatibilidad y que la última versión de la Especificación de eventos DOM recomienda usar la .keypropiedad en su lugar.

El problema es que .keyno es compatible con los navegadores, entonces, ¿qué deberíamos usar? ¿Se me escapa algo?

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) {

}

debe contemplarlos, esa es la manera correcta si desea compatibilidad con varios navegadores.

Podría ser más fácil si implementas 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);
};

Además, todos los keyCode , que , charCode y keyIdentifier están obsoletos:
charCodey keyIdentifierson funciones no estándar.
keyIdentifierse elimina a partir de Chrome 54 y Opera 41.0
keyCodedevuelve 0, en caso de pulsación de tecla con caracteres normales en FF.

La propiedad clave :

 readonly attribute DOMString key

Mantiene un valor de atributo de tecla correspondiente a la tecla presionada

En el momento de escribir este artículo, la keypropiedad es compatible con todos los navegadores principales 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 características como en el siguiente código:

Observe que el keyvalor es diferente de keyCodeo whichpropiedades en que: contiene el nombre de la clave, no su código. Si su programa necesita códigos de caracteres, puede utilizarlos charCodeAt(). Para caracteres únicos imprimibles que puede usar charCodeAt(), si está tratando con claves cuyos valores contienen varios caracteres, como es ArrowUp probable que esté probando claves especiales y tome las medidas correspondientes. A fin de tratar la implementación de una tabla de valores de Keys y sus códigos correspondientes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... y así sucesivamente, por favor miren valores clave 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 posteriores, es decir, usar las propiedades heredadas mientras estén disponibles, y solo cuando se suelten, 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 documentos deKeyboardEvent.code propiedad y algunos detalles más en esta respuesta .

TLDR: me gustaría sugerir que usted debe utilizar el nuevo event.keyy event.codepropiedades en lugar de los antiguos. IE y Edge admiten estas propiedades, pero todavía no admiten los nuevos nombres de clave. Para ellos, hay un pequeño polyfill que les hace generar 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 se keyCodevuelve más claro:

El problema con el uso keyCodees 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 lee las especificaciones de W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

En la práctica, keyCode y charCode son inconsistentes entre plataformas e incluso la misma implementación en diferentes sistemas operativos o usando diferentes localizaciones.

Se profundiza en la descripción de 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 detectar el agente de usuario y actuar en consecuencia significa que cualquier intento de formalizar estos atributos y eventos heredados corre el riesgo de romper tanto contenido como 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 que se reemplazó el keyCode heredado, veamos lo que debe hacer hoy:

1. Todos los navegadores modernos admiten las nuevas propiedades ( keyy code).
2. IE y Edge admiten una versión anterior de la especificación, que tiene diferentes nombres para algunas claves. Puede usar un calce para ello: https://github.com/shvaikalesh/shim-keyboard-event-key (o enrolle el suyo propio, de todos modos es bastante pequeño)
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 utilizar: https://www.w3.org/TR/uievents-key/

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

Por ejemplo, si desea detectar si se hizo clic en la tecla "Enter" o no:

En vez de

event.keyCode === 13

Hazlo como

event.key === 'Enter'