UTILSBOX⚡TODAS LAS TOOLS54+
JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//
MODULE 17 · DEV

Key Event Codes & JavaScript KeyCode

JavaScript le asigna un código numérico y propiedades a cada tecla del teclado. Presioná cualquier tecla para capturar sus valores en tiempo real.

Presioná cualquier tecla...
⇧ ShiftCtrlAlt⌘ Cmd
KEY-
CODE-
WHICH/KEYCODE (DEPRECATED)-
KEY NAME-
Hacé click acá arriba y presioná cualquier tecla — corre 100% en tu navegador, sin enviar datos a ningún servidor.

Tabla de referencia (keyCode)

deprecated, pero todavía compatible en todos los navegadores
8Backspace
9Tab
13Enter
16Shift
17Ctrl
18Alt
19Pause/Break
20Caps Lock
27Escape
32Space
33Page Up
34Page Down
35End
36Home
37Left Arrow
38Up Arrow
39Right Arrow
40Down Arrow
45Insert
46Delete
48Number 0
49Number 1
50Number 2
51Number 3
52Number 4
53Number 5
54Number 6
55Number 7
56Number 8
57Number 9
65Letter A
66Letter B
67Letter C
68Letter D
69Letter E
70Letter F
71Letter G
72Letter H
73Letter I
74Letter J
75Letter K
76Letter L
77Letter M
78Letter N
79Letter O
80Letter P
81Letter Q
82Letter R
83Letter S
84Letter T
85Letter U
86Letter V
87Letter W
88Letter X
89Letter Y
90Letter Z
91Left Windows/Cmd
92Right Windows
93Menu/Select
96Numpad 0
97Numpad 1
98Numpad 2
99Numpad 3
100Numpad 4
101Numpad 5
102Numpad 6
103Numpad 7
104Numpad 8
105Numpad 9
106Multiply
107Add
109Subtract
110Decimal Point
111Divide
112F1
113F2
114F3
115F4
116F5
117F6
118F7
119F8
120F9
121F10
122F11
123F12
144Num Lock
145Scroll Lock
186Semicolon ;
187Equal =
188Comma ,
189Dash -
190Period .
191Forward Slash /
192Grave Accent `
219Open Bracket [
220Backslash \
221Close Bracket ]
222Single Quote '
// Guía técnica y especificaciones

Guía técnica: KeyboardEvent en la especificación UI Events y el reemplazo de keyCode

Cuándo usar key, cuándo usar code y cómo sobreviven los atajos a teclados AZERTY, al teclado numérico y a los IME.

1. Por qué keyCode quedó como propiedad heredada

La especificación UI Events del W3C conserva KeyboardEvent.keyCode y KeyboardEvent.which solo como propiedades heredadas, documentadas por compatibilidad. El problema es que nunca hubo una tabla común: la tecla ";" emite 186 en Chrome, Edge y Safari, pero 59 en el Firefox histórico, y los navegadores devuelven 0 en muchas teclas dentro del evento keypress, que también quedó obsoleto. Los reemplazos normalizados son key, con el valor efectivo del carácter o el nombre de la acción, y code, con el identificador de la tecla física; ambos tienen listas cerradas de valores en las especificaciones "KeyboardEvent key Values" y "KeyboardEvent code Values". Para texto que se está insertando, lo correcto es escuchar beforeinput o input en lugar de deducir caracteres desde keydown.

2. event.key frente a event.code: significado o posición

code identifica la posición física tomando como referencia el teclado US QWERTY: la tecla de la esquina izquierda de la fila central siempre reporta KeyA, aunque en un AZERTY francés esté impresa como Q y en un QWERTZ alemán la Y y la Z aparezcan intercambiadas. key, en cambio, devuelve lo que la distribución produce en ese momento: "a" sin Shift, "A" con Shift y "q" en AZERTY. Por eso los controles WASD de un juego se leen con code (KeyW, KeyA, KeyS, KeyD) y los atajos semánticos con key (Enter, Escape, ArrowUp). El teclado numérico deja la diferencia a la vista: el 1 del numpad tiene code Numpad1 y el de la fila superior Digit1, pero los dos tienen key igual a "1".

3. Modificadores, repetición, location e isComposing

KeyboardEvent expone banderas booleanas para ctrlKey, shiftKey, altKey y metaKey (Cmd en macOS, tecla Windows en PC), y getModifierState() permite consultar estados que no tienen bandera propia, como CapsLock, NumLock o AltGraph. La propiedad repeat vale true en los keydown que el sistema genera al mantener una tecla apretada, útil para no disparar una acción cientos de veces. location distingue duplicados (0 estándar, 1 izquierda, 2 derecha, 3 numpad), igual que ShiftLeft y ShiftRight en code. Y isComposing indica que hay una composición en curso con un IME de japonés, chino o coreano: mientras sea true conviene no interceptar teclas, porque Enter confirma candidatos en vez de enviar el formulario.

// Arquitectura y buenas prácticas

❓ Preguntas frecuentes sobre eventos de teclado

¿Por qué event.keyCode devuelve 229 en Android o con un IME activo?

229 es el valor "processed" que envían los navegadores cuando la tecla la consume el editor de método de entrada o el teclado predictivo del móvil; en esos casos key llega como Unidentified. No hay forma de recuperar el carácter desde keydown: hay que leerlo de los eventos beforeinput e input o del value del campo, y esperar a que isComposing vuelva a false o a que se dispare compositionend.

¿Por qué mi atajo Ctrl+S deja de funcionar en otra distribución de teclado?

Si lo comparás contra event.key, el valor cambia con la distribución y con los modificadores: con Shift llega "S" y con AltGr puede llegar otro carácter. Para atajos ligados a una posición usá event.code === "KeyS"; si te interesa la letra, normalizá con key.toLowerCase(). Tené en cuenta además que en Windows AltGr se reporta como ctrlKey y altKey a la vez, lo que puede activar por error atajos de Ctrl+Alt.

¿Por qué no recibo el evento keyup de algunas teclas en macOS?

Mientras se mantiene apretada la tecla Cmd, macOS no entrega el keyup de las demás teclas, así que un registro de teclas presionadas queda desincronizado. También faltan keyup cuando la ventana pierde el foco a mitad de una combinación. Lo habitual es limpiar el conjunto de teclas activas en los eventos blur y visibilitychange en vez de confiar solo en keyup.

Herramientas de desarrollo relacionadas