Cómo usar: Buscador de keycodes de JavaScript
- Haz clic en el recuadro (o en cualquier parte de la página) y pulsa una tecla o un atajo.
- Lee
event.key,event.codey elkeyCodeheredado. - Copia el manejador
keydowngenerado para tu atajo.
key, code y keyCode
| Propiedad | Qué te indica | Para qué sirve |
|---|---|---|
event.key | El carácter o nombre de la tecla producido, según el diseño del teclado y Mayús ("a", "A", "Enter") | Entrada de texto, “escribe ? para ayuda” |
event.code | La posición física de la tecla, independientemente del diseño ("KeyA", "Digit1") | Juegos (WASD) y atajos basados en la posición |
event.keyCode / which | Códigos numéricos heredados (Enter = 13, Esc = 27) | Solo código antiguo — obsoleto |
event.location | 0 estándar, 1 izquierda, 2 derecha, 3 teclado numérico | Distinguir Mayús izquierda/derecha o las teclas del teclado numérico |
Códigos de tecla comunes
| Tecla | event.key | event.code | keyCode |
|---|---|---|---|
| Enter | Enter | Enter | 13 |
| Escape | Escape | Escape | 27 |
| Espacio | " " | Space | 32 |
| Tab | Tab | Tab | 9 |
| Retroceso | Backspace | Backspace | 8 |
| Teclas de flecha | ArrowLeft/Up/Right/Down | igual | 37–40 |
| A–Z | a–z / A–Z | KeyA–KeyZ | 65–90 |
| 0–9 | 0–9 | Digit0–Digit9 | 48–57 |
| F1–F12 | F1–F12 | F1–F12 | 112–123 |
Cómo escribir manejadores de atajos
Comprueba los modificadores de forma explícita (e.ctrlKey || e.metaKey cubre Ctrl en Windows y ⌘ en macOS), llama a e.preventDefault() solo en los atajos que gestionas y omite tu manejador mientras el usuario escribe en campos de texto. Usa key para los atajos con letras, para que sigan el diseño de teclado del usuario, y code cuando importe la posición física.
Prueba las expresiones regulares para gestionar teclas en el probador de expresiones regulares, o comprueba cómo se identifica el navegador con el analizador de user agent.
También se busca como: javascript keycode, lista de keycodes, event.key, event.code, visor de eventos de teclado, comprobar keycode, buscador de keycode.
Herramientas que combinan con: Buscador de keycodes de JavaScript
- Editor HTML en línea — Un playground de código ligero: edita HTML, CSS y JavaScript lado a lado, mira el resultado al instante, revisa la salida de la consola y descarga tu página como un único archivo HTML.
- Formateador de JavaScript — Desminifica y da formato a JavaScript, JSON o JSX con la sangría y el estilo de llaves que prefieras, o elimina espacios y comentarios con un minificador verificado.
- Resolución de pantalla — El tamaño de tu pantalla y de la ventana del navegador en píxeles CSS, la densidad de píxeles del dispositivo y la resolución física real, medidos en vivo por tu navegador.
- Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
Preguntas frecuentes
¿Debo usar keyCode?
No.
keyCode y which están obsoletos. Usa event.key para el carácter y event.code para la tecla física.¿Cuál es el keycode de Enter?
Enter tiene keyCode 13,
key "Enter" y code "Enter" (o "NumpadEnter" en el teclado numérico).¿Por qué Ctrl+W cierra la pestaña?
Algunos atajos del navegador no pueden ser interceptados por las páginas web por motivos de seguridad, como Ctrl+W, Ctrl+T y Ctrl+N en la mayoría de navegadores.
¿Puedo instalar Buscador de keycodes de JavaScript como aplicación web y utilizarla sin conexión?
Sí. Buscador de keycodes de JavaScript es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.