Buscador de códigos de tecla JavaScript

Cómo funciona

1. Pulsa una tecla: haz clic en la zona de entrada y pulsa cualquier tecla, letras, cifras, teclas de función, flechas, modificadoras o teclas especiales.
2. Lee los códigos de tecla: la herramienta muestra al instante los valores event.key, event.code, event.keyCode (heredado) y charCode de la tecla.
3. Usa en tu código: copia los valores exactos necesarios para tus escuchadores de eventos de teclado o tus implementaciones de atajos.

¿Por qué usar el detector de keycode?

Los eventos de teclado en JavaScript exponen varias propiedades distintas (key, code, keyCode, charCode y which) y saber cuál usar y contra qué valor comparar es sistemáticamente delicado. El detector de KeyCode elimina las conjeturas permitiéndote pulsar una tecla y ver de inmediato todas sus propiedades de evento. Valioso para construir atajos de teclado, gestionar teclas especiales, implementar hotkeys y depurar escuchadores de eventos de teclado.

Funcionalidades

• Todas las propiedades de evento: muestra event.key, event.code, event.keyCode, event.which y event.charCode para cada pulsación.
• Detección de teclas modificadoras: indica si Shift, Ctrl, Alt y Meta estaban pulsadas durante la pulsación.
• Soporte de teclas especiales: funciona con teclas de función (F1–F12), flechas, Enter, Esc, Tab, Retroceso y todas las demás teclas especiales.
• Historial de teclas: mantiene un registro de las pulsaciones recientes para comparar varias teclas.
• Copiar los valores: haz clic en cualquier valor para copiarlo directamente al portapapeles.

Preguntas frecuentes

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

event.key es la norma moderna, devuelve una cadena legible como «ArrowLeft» o «Enter». event.keyCode es un código numérico heredado (obsoleto pero aún admitido). Usa event.key para código nuevo; event.keyCode para mantener compatibilidad con navegadores antiguos.

¿Cómo detectar Ctrl+S u otras combinaciones de teclas?

Las combinaciones de teclado usan event.key combinado con comprobaciones de modificadores: if (event.ctrlKey && event.key === "s"). Pulsa Ctrl+S en esta herramienta para ver todos los valores y reproduce la misma condición en tu escuchador de eventos.

¿Por qué algunas teclas muestran el mismo keyCode?

Los valores de keyCode no se han estandarizado y algunas teclas comparten códigos según el contexto. event.code es más fiable, identifica la posición física de la tecla (p. ej. «KeyA») independientemente de la distribución del teclado, mientras que event.key refleja el carácter producido por esa tecla.

30 años de historia de eventos de teclado en JavaScript

Los eventos de teclado tienen una historia notoriamente caótica en el DOM. Netscape Navigator 2 (1995) introdujo los manejadores originales onkeydown, onkeypress y onkeyup con una propiedad numérica keyCode, que no tenía especificación; los navegadores inventaron cada uno sus propios valores. Internet Explorer 4 (1997) implementó su propia variante con event.keyCode como única propiedad, mientras que Netscape mantuvo event.which. DOM Level 2 Events (W3C, noviembre 2000) estandarizó el flujo de eventos (captura/burbuja) pero explícitamente dejó de lado los eventos de teclado porque los vendedores no podían ponerse de acuerdo. El resultado: los desarrolladores escribieron código como e.keyCode || e.which durante más de una década. DOM Level 3 Events (W3C Working Draft 2003, Recomendación 2018) finalmente introdujo el moderno event.key (carácter Unicode o tecla nombrada como «ArrowLeft») y event.code (posición física de tecla como «KeyA», independiente del layout), junto con la deprecación de keyCode, charCode y which. La especificación UI Events (W3C, en curso) es el hogar moderno de este trabajo. Los navegadores se pusieron al día gradualmente: Chrome 51 (mayo 2016), Firefox 47 (junio 2016), Safari 10.1 (marzo 2017) todos enviaron soporte para event.code. El evento legacy keypress está deprecado en favor de los eventos beforeinput e input.

Las 5 propiedades, decodificadas

• event.key (moderno, usa esto). El carácter o tecla nombrada producida. Letras y dígitos te dan el carácter Unicode respetando modificadores y layout (Shift+a = «A», AZERTY posición-Q = «a»). Las teclas nombradas son cadenas como «Enter», «Escape», «ArrowLeft», «F5», «Control». Definido en UI Events.
• event.code (moderno, usa para juegos). Identifica la tecla física en el teclado, independiente del layout o modificadores. Ejemplos: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Usa esto para movimiento WASD, navegación estilo vim, y atajos que deben ignorar el layout del teclado.
• event.keyCode (deprecado). Código numérico. 13 = Enter, 27 = Escape, 32 = Espacio, 37-40 = Flecha Izquierda/Arriba/Derecha/Abajo, 65-90 = A-Z, 112-123 = F1-F12. Los valores nunca fueron estandarizados, solo se volvieron consistentes entre navegadores por convergencia. Evítalo en código nuevo.
• event.which (deprecado). Equivalente Netscape de keyCode. Para la mayoría de caracteres imprimibles y teclas no-imprimibles, idéntico a keyCode. El viejo polyfill e.keyCode || e.which manejaba casos donde uno era 0.
• event.charCode (deprecado, solo en keypress). El punto de código Unicode del carácter. 97 para «a», 65 para «A». Solo se dispara en keypress (que está deprecado en sí mismo). Los eventos input y beforeinput son los reemplazos modernos.
• Booleanos modificadores. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Command en macOS, tecla Windows en Windows). Siempre revisa modificadores explícitamente: e.metaKey || e.ctrlKey para «guardar» multiplataforma (Cmd+S en Mac, Ctrl+S en Windows/Linux).
• event.location. Distingue modificadores izquierdo vs derecho y el teclado numérico. 0=estándar, 1=modificador izquierdo, 2=modificador derecho, 3=numérico. Útil para distinguir Shift-izquierdo vs Shift-derecho para layouts de juego.

Dónde la búsqueda de keycode realmente importa

• Atajos de teclado de aplicación. Cmd/Ctrl+S para guardar, Cmd/Ctrl+Z para deshacer, Cmd/Ctrl+K para abrir paleta de comandos (Slack, Linear, GitHub, Notion todos lo usan desde alrededor de 2020). Usa siempre event.key para la tecla imprimible y un booleano de modificador para la meta-tecla.
• Paleta de comandos y buscador difuso. El patrón Cmd+K popularizado por Slack (2014) y Linear (2019). Escucha el atajo de apertura globalmente, luego maneja navegación ArrowUp/ArrowDown, Enter para seleccionar, Escape para descartar.
• Juegos de navegador y desarrollo de juegos HTML5. Phaser, Babylon.js, Three.js. Usa siempre event.code para teclas de movimiento para que WASD funcione en teclados AZERTY (donde «W» está en la posición «Z»). Sebastian Lague, Notch (prototipo Minecraft temprano), y juegos itch.io todos cayeron en este escollo AZERTY.
• Patrones de accesibilidad. Los diálogos modales necesitan Escape para cerrar. Los widgets Combobox necesitan ArrowDown/ArrowUp/Enter/Escape. Las tooltips necesitan descartarse con Escape. El WAI-ARIA Authoring Practices Guide define patrones de interacción de teclado para cada widget común; event.key es el estándar para esas verificaciones.
• Implementación de editor de texto y código. Monaco (el editor de VS Code en el navegador), CodeMirror, ProseMirror, Lexical todos mapean eventos de teclado a comandos. Usan event.code para enlaces de teclas estilo vim/emacs que no dependen del layout.
• Mejoras UX de formulario. Enviar con Enter, blur con Escape, avanzar foco con Tab. Común en flujos de checkout, barras de búsqueda, campos de autocompletado.
• Atajos de extensión de navegador. Vimium, SurfingKeys, Tridactyl proveen navegación de teclado para toda la web. Escuchan a nivel de documento y manejan secuencias de teclas modales complejas (gg = ir al inicio, como vim).

Errores comunes en manejo de eventos de teclado

• Usar keyCode en código nuevo. Deprecado desde DOM Level 3 (2018), históricamente inconsistente entre navegadores, y rompe en layouts no-US (la coma tiene keyCode 188 en US, 191 en algunos teclados alemanes). Usa event.key en su lugar.
• Codificar duro e.key === "w" para movimiento de juego. En teclados AZERTY (francés), la tecla W física teclea «z». Los jugadores buscan lo que recuerdan como el cluster WASD pero obtienen la entrada equivocada. Usa event.code === "KeyW" en su lugar, que identifica la posición física.
• Revisar solo ctrlKey para «guardar». En macOS, Cmd+S es la convención; ctrlKey es falso pero metaKey es verdadero. Siempre revisa ambos: (e.metaKey || e.ctrlKey) && e.key === "s".
• Olvidar preventDefault en atajos reservados del navegador. Secuestrar Cmd+S sin preventDefault aún dispara Save Page As. Igual para Cmd+P (imprimir), Ctrl+F (buscar del navegador), Ctrl+N (nueva ventana, no puede bloquearse de todos modos), Ctrl+Tab (Chrome no te dejará). Llama e.preventDefault() en el manejador.
• Ignorar la composición IME. Los métodos de entrada japonés, chino, coreano (IME) disparan eventos keydown mientras el usuario compone caracteres. Revisa e.isComposing o usa el evento compositionend antes de disparar tu manejador de atajos. Slack famosamente la cagó con esto para usuarios japoneses en 2017.
• Usar el evento deprecado keypress. Se dispara solo para teclas productoras de caracteres (no teclas de flecha, función, etc.). Deprecado; usa keydown para atajos e input/beforeinput para cambios de texto.
• Disparar atajos en cada repetición. Mantener una tecla dispara eventos keydown repetidamente. Para acciones de toggle (abrir paleta, cambiar pestaña), revisa e.repeat y sal temprano para evitar registrar 30 comandos «abrir» cuando el usuario accidentalmente mantuvo la tecla.

Más preguntas frecuentes

¿Por qué mi manejador de tecla no se dispara cuando el usuario tiene teclado no-US?

Casi siempre porque estás revisando event.key para un carácter que solo existe con Shift en ese layout. En un teclado alemán QWERTZ, «/» es Shift+7 (no su propia tecla); en AZERTY francés, los dígitos 0-9 se tecletean con Shift+la-fila-de-arriba. Usa event.code (tecla física) para atajos basados en posición, o event.key para atajos basados en contenido (donde realmente quieres el carácter que el usuario acaba de teclear).

¿Cómo manejo Cmd+K / Ctrl+K consistentemente entre plataformas?

El idioma estándar: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. En macOS, e.metaKey es la tecla Cmd; en Windows/Linux, e.ctrlKey es lo que los usuarios esperan. Acepta ambos. Siempre preventDefault porque el navegador liga Cmd+K a «foco barra de direcciones» en algunos navegadores. Añade !e.repeat para evitar dispararse en mantenimiento de tecla.

¿Puede JavaScript detectar pulsaciones globales fuera de la página?

No, y esto es por diseño por seguridad. El navegador solo dispara eventos de teclado para la página o elemento enfocado. Las extensiones de navegador pueden escuchar con alcance más amplio usando la API chrome.commands. Las apps nativas en Electron, Tauri, etc., pueden usar hooks globales a nivel de SO. Las apps bancarias y 2FA dependen de esta aislación: una pestaña maliciosa no puede keylogger tu gestor de contraseñas.

¿Cuál es la forma correcta de detectar «recién presionado» vs «siendo mantenido»?

Para toggles, revisa !e.repeat en el manejador keydown: el primer evento tiene repeat: false, eventos subsecuentes de auto-repetición tienen repeat: true. Para acciones continuas (movimiento de juego), rastrea estado de teclas en un Set: añade en keydown, remueve en keyup, luego en tu bucle de renderizado revisa keysHeld.has("KeyW"). Esto desacopla la entrada del framerate y maneja múltiples teclas simultáneas (moverse + saltar).

¿Se envía algo a un servidor cuando presiono teclas aquí?

No. Los eventos de tecla son capturados localmente por JavaScript y mostrados en esta página sin ninguna petición de red. Abre la pestaña Network en DevTools, teclea; verás cero tráfico saliente. Seguro para probar en cualquier contexto, incluyendo descubrir lo que producen contraseñas o atajos sensibles en tu teclado.