Un usuario presiona Escape y el modal no se cierra. Pulsa Enter en el campo de búsqueda y no ocurre nada. ¿Le suena familiar? El manejo del teclado en JavaScript parece sencillo hasta que empieza a lidiar con tres eventos, una docena de propiedades y un zoológico de diferencias entre navegadores.

Cada keydown o keyup genera un objeto KeyboardEvent con dos docenas de campos. Algunos están obsoletos desde la época de IE, otros se comportan distinto en Firefox y Chrome. Y la documentación de MDN está plagada de notas de «no usar». Los desarrolladores no necesitan otra especificación, necesitan una hoja de referencia que funcione.

A continuación encontrará una referencia completa sobre eventos de teclado: desde la anatomía de KeyboardEvent hasta fragmentos listos para usar en atajos de teclado. Guarde la tabla de códigos en marcadores, la necesitará en prácticamente cada proyecto.

💡 Resumen rápido:

• Use keydown en lugar de keypress: funciona para cualquier tecla.
• event.key devuelve el símbolo de la tecla, event.code devuelve su código físico.
• event.keyCode y event.which están obsoletos, no los use en código nuevo.
• La tabla siguiente recopila los códigos de todas las teclas estándar en los navegadores modernos.

Qué contiene KeyboardEvent

Cuando un usuario presiona cualquier tecla, el navegador crea un objeto KeyboardEvent, descendiente de UIEvent, que a su vez extiende el Event base. Dentro están las propiedades de la tecla, el estado de los modificadores y la información de la distribución del teclado.

La especificación de UI Events está evolucionando: aparecen propiedades nuevas y las antiguas pasan a estar obsoletas. El cambio principal de los últimos años es el abandono de los códigos numéricos (keyCode / charCode / which) en favor de event.key y event.code. Todos los navegadores modernos admiten este par, y debería construir su lógica sobre ellos.

El soporte de los navegadores es prácticamente completo: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Si su proyecto no está anclado a IE11, puede olvidarse de event.which.

Tres eventos: keydown, keypress y keyup

El navegador distingue tres eventos de teclado. El orden de ejecución es fijo:

• keydown, la tecla se presiona (momento del contacto);
• keypress, la tecla se mantiene y genera un carácter (solo para teclas de carácter);
• keyup, la tecla se suelta.

Suscripción a keydown mediante addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Para manejadores en línea, use un atributo del elemento:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Si imprime el objeto evento en la consola, verá la estructura completa con todos los campos heredados de UIEvent y Event:

Por qué keydown es la opción principal

keypress está oficialmente reconocido como obsoleto. Solo se dispara para teclas que producen un valor de carácter y no captura modificadores: ni Alt, ni Ctrl, ni Shift, ni Meta. No puede manejar Ctrl+Z ni Shift+Tab mediante keypress.

La diferencia entre keydown y keyup: keydown se dispara antes de que el navegador procese la tecla; keyup se dispara después. De esto se deriva una consecuencia importante: event.preventDefault() dentro de keydown cancela la acción del navegador (por ejemplo, introducir un carácter en un campo), pero dentro de keyup no lo hace. Para atajos de teclado, validación de entrada y controles de juegos, necesita keydown.

Tabla de propiedades de KeyboardEvent

Las tres últimas filas están obsoletas. Siempre que sea posible, migre a event.key. Si tiene que dar soporte a un navegador antiguo, implemente un fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Pero en 2026, ese código es solo para proyectos heredados. event.key funciona en todas partes.

Teclas modificadoras y combinaciones

Las teclas Control, Shift, Alt y Meta no realizan acciones por sí solas, pero cambian el comportamiento de otras teclas. Presionar Z da la letra «z», mientras que Ctrl+Z ejecuta deshacer.

Las propiedades booleanas del evento ayudan a rastrear un modificador:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

El mismo enfoque se aplica a cualquier combinación: Ctrl+S (guardar), Ctrl+Shift+N (nueva ventana), Alt+Tab (cambiar). Verifique el orden: primero los modificadores mediante banderas booleanas, luego event.key para la tecla específica. Esto hace que la lógica sea legible en lugar de ahogarse en códigos numéricos.

Tabla completa de códigos de teclas

A continuación se muestra la tabla vigente para todas las teclas estándar. Los valores event.key y event.code se presentan tal como los devuelven los navegadores modernos (Chrome, Firefox, Edge, Safari).

Navegación y acciones

Fila numérica (teclado principal)

Letras A-Z

event.key devuelve el valor en minúscula para las letras. event.code no depende de mayúsculas ni de la distribución del teclado: KeyA significa la tecla física A, incluso si la distribución es rusa y la entrada es «Ф».

Teclas especiales

Teclado numérico (Numpad)

Teclas de función

Sistema y multimedia

Puntuación y símbolos

Notas importantes de la tabla

• event.which es una propiedad obsoleta, use event.key.
• event.code es idéntico para letras minúsculas (a) y mayúsculas (A), es la tecla física. event.key devuelve el carácter real considerando mayúsculas y minúsculas.
• En Firefox, los valores de event.which para las teclas Equal, Semicolon y Minus difieren de Chrome/Edge/Safari (anotado en la tabla). Otra razón para no usar event.which.
• Los navegadores basados en Chromium y Firefox dan valores idénticos de event.key y event.code para todas las teclas listadas.
• Teclados virtuales: la especificación de UI Events exige que un teclado virtual (móvil, en pantalla) que repita una distribución estándar devuelva el event.code correcto. En la práctica, los navegadores móviles (Chrome Android, Safari iOS) manejan correctamente keydown/keyup para las teclas principales, pero event.code puede estar vacío para distribuciones no estándar.

Entrenador interactivo

Para una verificación rápida de cualquier código del artículo, use el entrenador de teclado: keyevents.netlify.app. Mueva el cursor al área, presione teclas y vea los valores de event.key, event.code y event.which, así como los estados de las banderas de modificadores en tiempo real. El código fuente está disponible en GitHub.

Video: eventos de teclado en la práctica

Un breve desglose práctico de keydown y keyup, trabajo con modificadores y atajos de teclado con ejemplos en vivo:

⁉️🤔 Preguntas frecuentes

¿Cuál es la diferencia entre event.key y event.code?

event.key devuelve el valor del carácter considerando la distribución y las mayúsculas: para la tecla A es "a" (o "A" con Shift), para la distribución rusa, "ф". event.code devuelve el código físico de la tecla, idéntico para todas las distribuciones: "KeyA". Para atajos de teclado, event.code es más fiable, no depende del idioma de entrada. Para entrada de texto, use event.key.

¿Por qué ya no se usa keypress?

La especificación del W3C marcó keypress como obsoleto: solo se dispara para teclas de carácter y no captura modificadores. No puede manejar Ctrl+C, Shift+Tab y otras combinaciones mediante keypress. keydown cubre todas las teclas y tiene un soporte idéntico en todos los navegadores modernos.

¿Se puede abandonar por completo event.which y event.keyCode?

Sí, en 2026 puede hacerlo. event.key es compatible con Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Si su proyecto no apunta a IE11 ni a Firefox 28, use solo event.key y event.code.

¿Cómo se maneja una pulsación larga de tecla?

Combine keydown y keyup. En keydown inicie un temporizador o requestAnimationFrame, en keyup, reinícielo. Para entrada de juegos, este es el patrón estándar: tecla mantenida, personaje se mueve; soltada, se detiene.

¿Funcionan los eventos de teclado en dispositivos móviles?

keydown y keyup funcionan en navegadores móviles al usar un teclado Bluetooth externo. El teclado en pantalla genera eventos input, no keydown/keyup para todas las teclas, por lo que para campos de texto en móviles es mejor usar el evento input.

¿Cómo se distingue Shift izquierda de la derecha?

Mediante event.code: "ShiftLeft" o "ShiftRight". event.key devuelve "Shift" para ambas. Lo mismo para Control, Alt y Meta.

Qué usar en su proyecto

Si está escribiendo código nuevo, tome keydown como evento principal y, para la identificación de teclas, event.key (símbolo) y event.code (tecla física). Esta combinación cubre todos los escenarios: atajos de teclado, navegación, entrada de juegos, validación de formularios.

Si mantiene un producto con código heredado basado en event.which o event.keyCode, planifique una refactorización. El volumen de trabajo es pequeño: reemplazo en los manejadores, pero el beneficio es un código limpio y predecible sin un zoológico de diferencias entre navegadores.

Guarde la tabla anterior en marcadores. La próxima vez que necesite el código de una tecla específica, ábrala y copie el valor event.code necesario sin tener que recordar códigos numéricos de la era de IE6.