En las últimas versiones de Chrome, se agregaron dos elementos a KeyboardEvent, que se usan como un parámetro que se pasa a los objetos de escucha de eventos keydown, keypress y keyup. Tanto el atributo code (que se agregó en Chrome 48) como el atributo key (que se agregó en Chrome 51) les brindan a los desarrolladores una forma sencilla de obtener información que, de otro modo, sería difícil usar con atributos heredados.
El atributo de código
Primero, 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 de teclado actual (por ejemplo, QWERTY en comparación con Dvorak), la configuración regional (por ejemplo, inglés en comparación con francés) ni ninguna tecla modificadora.
Esto es útil cuando te interesa saber qué tecla física se presionó, en lugar de a qué carácter corresponde. Por ejemplo, si estás escribiendo un juego, es posible que quieras usar un conjunto determinado 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 mientras code muestra información sobre la tecla física que se presionó, key contiene el carácter que genera esa tecla, teniendo en cuenta el diseño del teclado, la configuración regional y las teclas modificadoras actuales.
Consultar el valor del atributo key resulta útil cuando necesitas saber qué carácter se mostrará en la pantalla como si el usuario hubiera escrito en una entrada de texto.
¿Qué significa esto en la práctica?
Para dar un ejemplo concreto, supongamos que tu usuario usa un teclado de EE.UU. con un diseño QWERTY. Si presionas la tecla física Q en ese teclado, se generará un KeyboardEvent con un atributo code establecido en "KeyQ". Esto es así 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 una code de "KeyQ", aunque la letra impresa en la tecla sea una "a".
Por lo general, presionar la tecla física Q en ese mismo teclado de EE.UU. generará un KeyboardEvent con key establecido en "q" (sin teclas modificadoras), "Q" (con Mayúsculas o Bloqueo de mayúsculas) o "œ" (en OS X, con Alt). En un teclado AZERTY francés, esta misma tecla generaría una "a" (o "A" con Mayúsculas o Mayúsculas sostenidas). Y para otros diseños de teclado, el valor de key podría ser "й", "ض", "ㅂ", "た" o algún otro carácter.
Si quieres que tu juego use las teclas WASD para el movimiento, puedes usar el atributo code y verificar "KeyW", "KeyA", "KeyS" y "KeyD". Esto funcionará para todos los teclados y todos los diseños, incluso los teclados AZERTY que intercambian la posición de las teclas "w" y "z".
Teclados virtuales
Notarás que, hasta ahora, nos hemos enfocado en el comportamiento asumiendo un teclado físico. ¿Qué sucede 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 imite el diseño de un teclado estándar establezca un atributo code adecuado, pero los teclados virtuales que adoptan diseños no tradicionales pueden hacer que code no se establezca en absoluto.
Las cosas son más sencillas para el atributo key, que debería establecerse en una cadena según el carácter que el usuario escribió (virtualmente).
Probar
Gary Kačmarčík creó una demostración fantástica para visualizar todos los atributos asociados con KeyboardEvent:
Compatibilidad con varios navegadores
En el momento de escribir este artículo, la compatibilidad con el atributo code se limita a Chrome 48 y versiones posteriores, Opera 35 y versiones posteriores, y Firefox 44 y versiones posteriores.
El atributo key es compatible con Firefox 44 y versiones posteriores, Chrome 51 y versiones posteriores, y Opera 38 y versiones posteriores, con compatibilidad parcial en Internet Explorer 9 y versiones posteriores, y Edge 13 y versiones posteriores.