En las últimas versiones de Chrome, se agregaron dos adiciones a los KeyboardEvent, que se usan como parámetro que se pasa a los objetos de escucha de eventos keydown, keypress y keyup. Tanto el atributo code (agregado en Chrome 48) como el atributo key (agregado en Chrome 51) ofrecen a los desarrolladores una forma sencilla de obtener información que, de otro modo, sería difícil con los atributos heredados.
El atributo del código
En primer lugar, está el atributo code. Se establece en una cadena que representa la tecla que se presionó para generar el KeyboardEvent, sin tener en cuenta el diseño actual del teclado (por ejemplo, QWERTY frente a Dvorak), la configuración regional (por ejemplo, inglés frente a francés) ni las teclas modificadoras.
Esto es útil cuando te importa saber a qué tecla física se presionó y no a qué carácter corresponde. Por ejemplo, si estás escribiendo un juego, es posible que desees un determinado conjunto de teclas para mover al jugador en diferentes direcciones, y esa asignación debería ser independiente del diseño del teclado.
El atributo clave
A continuación, tenemos el nuevo atributo key. También se establece en una cadena, pero, si bien code muestra información sobre la tecla física que se presionó, key contiene el carácter que genera esa tecla, según el diseño del teclado, la configuración regional y las teclas modificadoras actuales.
Observar el valor del atributo key resulta útil cuando necesitas saber qué carácter se mostraría en la pantalla como si el usuario hubiera escrito una entrada de texto.
¿Qué significa esto en la práctica?
Para dar un ejemplo concreto, supongamos que tu usuario está usando un teclado de EE.UU. con un diseño de teclado QWERTY. Si presionas la tecla física Q en ese teclado, se generará una KeyboardEvent con un atributo code establecido en "KeyQ". Esto se aplica independientemente del diseño del teclado y de cualquier otra tecla modificadora. A modo de comparación, en un teclado francés (AZERTY), esta tecla seguiría teniendo un code de "KeyQ", aunque la letra impresa en la tecla sea una "a".
Por lo general, si presionas la tecla física Q en el mismo teclado de EE.UU., se generará una KeyboardEvent con key establecido en "q" (sin teclas modificadoras), o en "Q" (con Mayúsculas o Bloq Mayús) o "œ" (en OS X, con Alt). En un teclado francés AZERTY, esta misma tecla generaría una "a" (o "A" con Mayúsculas o Bloq Mayús). Y para otros diseños de teclado, el valor key podría ser "й", "ض", "ㅂ", "た" o algún otro carácter.
En el ejemplo anterior de nuestro juego, si quieres que tu juego use las teclas WASD para moverte, puedes usar el atributo code y verificar si hay "KeyW", "KeyA", "KeyS" y "KeyD". Esto funcionará para todos los teclados y todos los diseños, incluso para los teclados AZERTY que cambian la posición de las teclas "w" y "z".
Teclados virtuales
Notarás que, hasta ahora, nos enfocamos en el comportamiento que supone el uso de un teclado físico. ¿Qué pasa con los usuarios que escriben en un teclado virtual o un dispositivo de entrada alternativo? La especificación ofrece orientación oficial para el atributo code. En resumen, se espera que un teclado virtual que imita el diseño de un teclado estándar genere la configuración de un atributo code apropiado, pero los teclados virtuales que adoptan diseños no tradicionales pueden hacer que no se establezca code en absoluto.
Es más sencillo para el atributo key, que se espera que se establezca en una cadena según el carácter que haya escrito el usuario (de forma virtual).
Probar
Gary Kačmarčík creó una demostración fantástica para visualizar todos los atributos asociados con KeyboardEvent:
Compatibilidad con varios navegadores
A partir de este momento, la compatibilidad del atributo code está limitada a Chrome 48 y versiones posteriores, Opera 35 y versiones posteriores, y Firefox 44 o versiones posteriores. El atributo key es compatible con Firefox 44, Chrome 51 y Opera 38 y versiones posteriores, y compatibilidad parcial con Internet Explorer 9 y versiones posteriores, y Edge 13 y versiones posteriores.