Los eventos de teclado de JavaScript son un desastre — aquí está la referencia de códigos de teclado que guardarás

En algún momento de tu carrera con JavaScript, te sientas a manejar una tecla presionada. No es nada complicado. Abres MDN y encuentras no una, no dos, sino cuatro propiedades diferentes que podrías usar: keyCode, which, keyy code. Tres de ellas están despreciadas. Ninguna de ellas define claramente qué es una «tecla». ¡Felicidades — has llegado a una de las zonas más históricamente caóticas de la web!

Esta referencia corta el ruido. Aprenderás cuáles son las propiedades que debes usar, cuáles evitar, y obtendrás una tabla completa de valores comunes de teclas para que no tengas que adivinar.

Las Cuatro Propiedades — Y Por Qué Hay Cuatro

Los eventos de teclado en JavaScript exponen varias propiedades en el objeto de evento. Aquí está lo que cada una realmente es:

Propiedad	Lo que devuelve	Estado
event.key	Una cadena legible para humanos como "Enter", "ArrowUp", o "a"	✅ Usa esta
event.code	El identificador físico de la tecla, por ejemplo "KeyA", "Digit1", "ArrowLeft"	✅ Usa esta para la detección independiente de la disposición
event.keyCode	Un código numérico, por ejemplo 13 para Enter	⚠️ Despreciada — evítala en el nuevo código
event.which	El mismo valor numérico que keyCode	⚠️ Despreciada — evítala en el nuevo código

keyCode y which son esencialmente lo mismo, pero de diferentes épocas de la historia del navegador. Ambos devuelven un entero que representa la tecla. Ambos están despreciados. Ambos funcionan en todos los navegadores, por lo que seguirás encontrándolos en códigobases que datan de antes de 2015.

Por qué keyCode Despreciada Pero Aún En Todo Lugar

keyCode fue la forma original de detectar presiones de teclas en el DOM del navegador, remontándose a los primeros modelos de eventos de Netscape. Funcionaba — en gran medida — pero tenía graves inconsistencias: la misma tecla podía devolver códigos diferentes en diferentes navegadores, las letras mayúsculas no se trataban de forma uniforme, y las teclas no ASCII eran un caos.

La W3C desprecia formalmente keyCode y which en el especificación DOM Level 3 Events (2016) en favor de key y code. Pero la desprecación significa «le recomendamos que dejes de usarlo», no «vamos a romper tu sitio». Los navegadores aún la soportan y probablemente lo harán por el futuro inmediato.

El resultado: los repositorios de código antiguo están llenos de event.keyCode === 13 comprobaciones, respuestas en Stack Overflow de 2012 recomiendan usarla, y la encontrarás en código en producción en todos lados. No se irá pronto — simplemente no deberías escribir nuevo código que la use.

event.key vs event.code — ¿Cuál Es la que Necesitas?

Esta es la distinción que confunde a la mayoría de personas. Ambas son modernas y correctas — responden a preguntas diferentes.

• Usa event.key cuando te interesa el carácter que el usuario intenciona escribir. En un teclado de EE. UU., presionar Shift + 2 te da event.key === "@". En un teclado alemán, la misma tecla física te da un carácter diferente. event.key refleja el resultado lógico real.
• Usa event.code cuando te interesa la tecla física presionada, independientemente de la disposición. Esto es lo que necesitas para controles de juegos, atajos de teclado que no deben cambiar con el idioma del usuario, o cualquier cosa en la que «la tecla Q» signifique la tecla superior izquierda, no el carácter Q.

Para la mayoría de los casos prácticos — envíos de formularios, cierre de diálogos, atajos rápidos — event.key es lo que necesitas. Para controles de juegos y atajos basados en posición, utiliza event.code.

Manejo correcto de teclas en JavaScript moderno

Aquí está cómo manejar casos comunes correctamente:

Tecla Enter (envío de formularios, diálogos de confirmación)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Tecla Escape (cierra modales, cancela acciones)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Teclas de flecha (navegación, deslizadores, controles de juegos)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Teclas de modificador (Ctrl+S, Cmd+K, etc.)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Usa e.ctrlKey, e.shiftKey, e.altKeyy e.metaKey (Cmd en Mac) para detectar combinaciones de teclas. Estas no están despreciadas y funcionan exactamente como se espera.

Tabla completa de referencias de teclas

La tabla a continuación cubre las teclas que usarás con más frecuencia. Para cualquier tecla no listada aquí, utiliza la herramienta Información sobre códigos de teclas — presiona cualquier tecla y obtén inmediatamente el valor exacto de event.key, event.code, y los valores de legacy keyCode .

Tecla	event.key	event.code	keyCode (legacy)
Introduce	"Enter"	"Enter"	13
Escapar	"Escape"	"Escape"	27
Espacio	" " (espacio)	"Space"	32
Pestaña	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Borrar	"Delete"	"Delete"	46
Flecha Arriba	"ArrowUp"	"ArrowUp"	38
Flecha Abajo	"ArrowDown"	"ArrowDown"	40
Flecha Izquierda	"ArrowLeft"	"ArrowLeft"	37
Flecha Derecha	"ArrowRight"	"ArrowRight"	39
Hogar	"Home"	"Home"	36
Fin	"End"	"End"	35
Página Arriba	"PageUp"	"PageUp"	33
Página Abajo	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (izquierdo)	"Shift"	"ShiftLeft"	16
Ctrl (izquierdo)	"Control"	"ControlLeft"	17
Alt (izquierdo)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (minúsculas)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (fila superior)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (teclado numérico)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

La tecla de código que no puedes recordar: busca en tiempo real

Ninguna tabla de referencia cubre todas las teclas para todos los tipos de teclados. Cuando necesitas los valores exactos para una tecla que no estás seguro — una tecla del teclado numérico, una tecla de medios, un carácter regional — el enfoque más rápido es presionarla y ver.

El Información sobre códigos de teclas hace exactamente eso. Presiona cualquier tecla y te muestra inmediatamente event.key, event.code, event.keyCodey event.which — más el estado de modificadores. Sin copiar y pegar de MDN, sin adivinar qué se llama realmente «NumpadEnter».

La versión breve

• Usa event.key para la mayoría de los casos de manejo de teclas — es legible, moderna y consciente del idioma.
• Usa event.code cuando la posición física de la tecla importa más que el carácter (controles de juegos, atajos basados en posición).
• Deja de escribir código nuevo que use event.keyCode o event.which. Funcionan, pero están despreciadas y son menos predecibles.
• Cuando encuentres código antiguo que use keyCode === 13, significa Enter. keyCode === 27 significa Escape. La tabla anterior tiene el resto.
• Para una tecla que no encuentres en ninguna referencia, presiona en el Información sobre códigos de teclas y obtén la respuesta inmediatamente.

También te puede interesar