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

103

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?

Jason210
fuente
3
.keyes compatible con todos los principales desarrolladores de
Sinan Bolel

Respuestas:

37

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);
};
Miguel Lattuada
fuente
15
Leí eso, pero parecía ser un montón de código adicional sin otra razón que MDN dijo que algo está desaprobado, cuando en realidad funciona bien en todos los navegadores principales. Pero si esa es la forma correcta, ¡gracias!
Jason210
3
Vaya, mira esto. caniuse.com/#search=keyCode (Esta propiedad KeyboardEvent es compatible de manera efectiva con todos los navegadores (desde IE6 +, Firefox 2+, Chrome 1+, etc.) hablando de .keyCode)
Miguel Lattuada
2
Eso es lo que resulta tan molesto de todo esto. Todos los navegadores principales admiten keyCode, pero intente verificar la propiedad .key, que es la recomendada, ¡y casi nadie la usa!
Jason210
4
Sí, estamos hasta finales de mayo de 2016 y Chrome finalmente implementó la propiedad KeyboardEvent.key. Safari, junto con todos los navegadores móviles, aún no se ha unido al grupo del "16,5% de todos los usuarios". Además, lamentablemente, Microsoft Edge y Gecko codifican algunos de los eventos de manera diferente, por ejemplo: el evento clave para la flecha hacia arriba se codifica como "Arriba" en lugar de "ArrowUp".
Joshua Dawson
Creo que esto te ayudará a stackoverflow.com/questions/41465542/…
Maven97
26

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 .

usuario10089632
fuente
Su solución no funciona en mi navegador (Windows 10, Chrome 60, teclado belga). En primer lugar, la charCodeArrfunción no existe. Además, charCodeAtno funciona para todos los valores de e.key. Por ejemplo, para la tecla Enter/ Return, el valor de e.keypropiedad es "Enter", y la ejecución charCodeArrde esa cadena devuelve el valor 69(que es el código ASCII del carácter E).
John Slegers
@JohnSlegers, sí, fue un error tipográfico, me refiero a una matriz construida por el usuario. Por favor, consulte mi respuesta actualizada para obtener más detalles.
user10089632
22

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/
Kumarharsh
fuente
Según MDN , ni Internet Explorer ni Edge son compatiblesKeyboardEvent.code. Además, los valores dekeyycodedependen del navegador. Ambos problemas hacenkeyycodeno son prácticos para usar en aplicaciones de la vida real.
John Slegers
Si quiero probar las teclas de flecha, página arriba / abajo, inicio y fin, ¿debo usar keyo code? Por lo general, es una tecla física, pero también puede depender de Num Lock y del diseño ... ¿Cuál es la mejor práctica?
Jake
15

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);
Vicky Gonsalves
fuente
3
Desafortunadamente, keyes un valor de cadena específico del navegador como "Enter"o "ArrowUp"y no hay una forma estandarizada de convertirlo en el código correspondiente. por lo que necesitará aún más código repetitivo para convertir entre clave y código.
John Slegers
8

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'
Thomas Gotwig
fuente