Pulsa una tecla y lee todas las propiedades del KeyboardEvent resultante: key, code, keyCode, which, location y los indicadores ctrl, shift, alt y meta, con JSON copiable.
Pulsa una tecla. Comprueba exactamente que informa el navegador. Haz clic en el area de captura y pulsa cualquier tecla o combinacion. Todas las propiedades del KeyboardEvent aparecen una al lado de otra, para que elijas la correcta en tu manejador de atajos en lugar de adivinar.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
Modificadores pulsados
ninguno
key, code y keyCode no son lo mismo
Tres propiedades, tres preguntas distintas
Un KeyboardEvent expone varias formas de identificar una tecla, y responden a preguntas genuinamente diferentes. event.key es el caracter o el valor con nombre que produce la pulsacion despues de aplicar la distribucion del teclado y los modificadores. Pulsar la tecla fisica A da a, o A con shift, o una letra completamente distinta en una distribucion Dvorak o AZERTY. Las teclas con nombre llegan como cadenas descriptivas como Enter, Escape, ArrowLeft y F5.
event.code identifica en cambio la posicion fisica de la tecla, usando un nombre independiente de la distribucion tomado de un teclado estadounidense teorico. La tecla situada en la posicion de la A es siempre KeyA, produzca lo que produzca la distribucion del usuario. Los digitos de la fila superior son Digit1 hasta Digit0, y el teclado numerico informa Numpad1 y companeros, de modo que puedes distinguir las dos filas de digitos.
event.keyCode y su gemelo event.which son los identificadores numericos heredados. Ambos estan formalmente obsoletos, ambos siguen implementados en todas partes y ambos son inconsistentes entre navegadores para los signos de puntuacion. Merece la pena leerlos cuando mantienes codigo antiguo, pero el manejo nuevo de atajos deberia usar key o code.
Elegir entre key y code
La regla practica es sencilla: usa code cuando importe la posicion y key cuando importe el significado. Un juego que asigna el movimiento a WASD quiere code, porque el grupo fisico bajo la mano izquierda del jugador debe permanecer en el mismo sitio en un teclado AZERTY aunque produzca ZQSD. Un editor de texto que asigna guardar a Ctrl+S quiere key, porque el usuario piensa en la letra S y no en la tecla que hay junto a la A.
Los modificadores son booleanos independientes: ctrlKey, shiftKey, altKey y metaKey. Comprueba cada uno explicitamente en lugar de deducirlo de key, y recuerda que el modificador principal de atajos es Command en macOS y Control en el resto. Un patron habitual es aceptar event.metaKey || event.ctrlKey para que un solo manejador cubra ambas plataformas.
event.location desambigua teclas duplicadas. Vale 0 para una tecla estandar, 1 para el miembro izquierdo de un par como el Shift izquierdo, 2 para el derecho y 3 para una tecla del teclado numerico.
Trampas practicas
No todas las teclas generan los eventos que esperas. El navegador se reserva algunas combinaciones: Ctrl+W, Ctrl+T y Command+Q normalmente cierran pestanas o salen de la aplicacion antes de que la pagina las vea, y preventDefault no puede recuperarlas. Prueba cualquier atajo en una ventana real del navegador en lugar de suponer que llegara a tu manejador.
Mantener una tecla pulsada produce un flujo de eventos de repeticion con event.repeat a true a partir del primero. Ignora las repeticiones cuando el atajo deba dispararse una sola vez, y respetalas cuando el comportamiento sea continuo, como desplazarse o mover un cursor.
Por ultimo, keydown y keyup describen teclas, mientras que keypress describia caracteres y ha sido eliminado del estandar. Para la entrada de texto, es preferible escuchar el evento input o leer beforeinput, que gestionan la composicion, el autocompletado y los teclados moviles mucho mejor de lo que puede hacerlo cualquier evento de tecla.
Preguntas frecuentes
Debo usar key o code para un atajo de teclado?
Usa `code` cuando importa la posicion fisica, como el movimiento WASD en un juego. Usa `key` cuando importa el significado, como Ctrl+S para guardar, para que el atajo siga la distribucion del usuario.
Por que keyCode esta obsoleto y sigue funcionando?
Es anterior a los eventos conscientes de la distribucion y devuelve numeros inconsistentes para la puntuacion segun el navegador. Todos los motores lo mantienen por compatibilidad, pero la especificacion dirige el codigo nuevo hacia `key` y `code`.
No pasa nada al pulsar Ctrl+W o Command+Q.
Esas combinaciones las reclama el navegador o el sistema operativo y se gestionan antes de que la pagina las reciba. No hay forma fiable de interceptarlas desde una pagina web normal.
Como escribo un atajo que funcione en macOS y en Windows?
Acepta cualquiera de los modificadores principales comprobando `event.metaKey || event.ctrlKey`. Eso corresponde a Command en macOS y a Control en Windows y Linux sin ramificar por el agente de usuario.
Que significa location 3?
Que la tecla esta en el teclado numerico. Los valores 1 y 2 indican el miembro izquierdo y derecho de un par duplicado como Shift o Control, y 0 una tecla ordinaria sin duplicado.
Puedo usar esto para construir un manejador de entrada de texto?
Es mejor escuchar el evento `input`. Los eventos de tecla se pierden la composicion de los teclados IME, el autocompletado y muchos teclados virtuales moviles, cosas que `input` si informa correctamente.