Buscador de keycode de JavaScript
Pulsa cualquier tecla para ver todo lo que informa un KeyboardEvent de JavaScript: event.key, event.code, los antiguos keyCode y which, la ubicación de la tecla y el estado de los modificadores. Copia cualquier valor o un controlador keydown listo para usar y consulta los códigos más comunes en la tabla de abajo.
Última actualización:
Pulsa cualquier tecla para obtener su keycode de JavaScript
Haz clic aquí primero si no pasa nada. En un teléfono, toca el cuadro de abajo para abrir el teclado.
Fragmento de código
Registro de eventos
| Evento | key | code | keyCode | Modif. |
|---|---|---|---|---|
| Las pulsaciones aparecen aquí. | ||||
Referencia de códigos de teclas
| Tecla | event.key | event.code | keyCode |
|---|
Haz clic en una fila para copiar su event.code. Firefox difiere en ; (59), = (61) y - (173).
Cómo usar Buscador de keycode de JavaScript
- Pulsa cualquier tecla de tu teclado. El número grande es el keyCode y las tarjetas muestran cada propiedad del evento.
- Prueba combinaciones como Shift+A o Ctrl+S: los indicadores de modificadores se iluminan y event.key muestra el carácter resultante.
- Haz clic en una tarjeta para copiar su valor, por ejemplo la cadena de event.code.
- Copia el fragmento de código: elige si comparar por event.key o event.code y pega el controlador en tu proyecto.
- Busca una tecla sin pulsarla buscando en la tabla de referencia.
key, code, keyCode y which comparados
| Propiedad | Qué te indica | Ejemplo (Shift + 2 en un teclado de EE. UU.) | Estado |
|---|---|---|---|
event.key | El carácter o nombre de tecla producido, tras aplicar la distribución y los modificadores | "@" | Recomendado |
event.code | La tecla física, independiente de la distribución | "Digit2" | Recomendado |
event.keyCode | Un código numérico, basado sobre todo en la tecla sin Shift | 50 | Obsoleto |
event.which | Igual que keyCode en keydown y keyup | 50 | Obsoleto |
event.location | 0 estándar, 1 izquierda, 2 derecha, 3 teclado numérico | 0 | Vigente |
Cómo elegir entre key y code
Usa event.key cuando importa el significado: atajos de teclado como Ctrl+S, cerrar un cuadro de diálogo con Escape, enviar con Intro o leer los caracteres escritos. Respeta la distribución de teclado del usuario, así que un usuario francés que pulsa la tecla marcada "Z" obtiene "z".
Usa event.code cuando importa la posición: movimiento WASD en un juego, teclas de piano o batería, o cualquier caso en que la disposición física sea lo importante. En un teclado AZERTY las teclas WASD están marcadas ZQSD pero siguen informando KeyW, KeyA, KeyS y KeyD.
Evita keyCode y which en código nuevo. Se mantienen para navegadores antiguos y scripts existentes, pero sus valores difieren entre navegadores en algunas teclas de puntuación y son ambiguos en distribuciones que no son de EE. UU.
Errores habituales
- El
event.keyde la barra espaciadora es un único carácter de espacio" ", no "Space". Suevent.codees"Space". - Con Shift pulsado, las teclas de letras informan un
event.keyen mayúscula ("A"), así que compara conevent.key.toLowerCase()para atajos que no distingan mayúsculas y minúsculas. - En macOS usa
event.metaKey(⌘) donde Windows y Linux usanevent.ctrlKeypara atajos como guardar y copiar. - El evento
keypressestá obsoleto. Usakeydownpara las teclas y el eventoinputpara los cambios de texto. - Comprueba
event.isComposing(o keyCode 229) para ignorar los eventos de teclado mientras un método de entrada compone texto en chino, japonés o coreano.
Preguntas frecuentes
¿Cuál es la diferencia entre event.key y event.code?
event.key es el valor que produce la tecla, teniendo en cuenta la distribución y los modificadores: "a", "A", "Enter" o "é". event.code es la posición física de la tecla, independiente de la distribución: la tecla junto a Tab siempre es "KeyQ", incluso en un teclado AZERTY donde escribe "a". Usa key para texto y atajos por carácter, y code para controles de juegos como WASD.
¿keyCode está obsoleto?
Sí. keyCode y which están obsoletos en la especificación UI Events y sus valores varían entre navegadores y distribuciones de teclado. Siguen funcionando en todos los navegadores por compatibilidad, pero el código nuevo debería usar event.key o event.code.
¿Cuál es el keyCode de Intro, Escape y Espacio?
Intro es 13, Escape es 27, Espacio es 32, Tab es 9 y Retroceso es 8. Las flechas son 37 (izquierda), 38 (arriba), 39 (derecha) y 40 (abajo). Con código moderno, compara event.key con "Enter", "Escape", " " (un espacio), "Tab" o "ArrowLeft".
¿Por qué algunas teclas muestran keyCodes distintos en Firefox?
Algunas teclas de puntuación difieren: en Firefox el punto y coma es 59, el igual es 61 y el menos es 173, mientras que Chrome, Edge y Safari usan 186, 187 y 189. La tecla Meta (Windows / Command) es 91 en los navegadores Chromium y 224 en versiones antiguas de Firefox. event.code evita estas diferencias.
¿Qué significa event.location?
Indica qué copia de una tecla se pulsó: 0 para una tecla estándar, 1 para la izquierda (Shift, Ctrl, Alt o Meta izquierdos), 2 para la derecha y 3 para el teclado numérico.
¿Por qué mi teléfono muestra keyCode 229 o "Unidentified"?
Muchos teclados virtuales de Android usan un método de entrada (IME) que informa keydown con keyCode 229 y key "Unidentified" mientras se compone el texto. Escucha el evento input o beforeinput para leer el texto escrito en el móvil.
¿Por qué no puedo detectar algunas teclas como Fn o Impr Pant?
La tecla Fn se gestiona dentro del teclado y nunca llega al navegador. Algunas teclas y atajos están reservados por el sistema operativo o el navegador, como Impr Pant en algunos sistemas, Ctrl+W o Alt+Tab, así que una página web no puede recibirlos ni bloquearlos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.