WhatsApp

  

Event KeyCodes

Detecta teclas y muestra sus propiedades

¿De qué va?

Un mini-proyecto para practicar eventos de teclado en la web. Al presionar una tecla, la página muestra sus datos más útiles (p. ej., key, code, keyCode —este último está deprecado—, además de modificadores como ctrlKey). Es perfecto para entender qué envía el navegador cuando el usuario interactúa con el teclado (o con lectores de pantalla que emulan key events).

Qué aprenderás

  • Escuchar keydown a nivel de ventana.

  • Diferencias entre event.key, event.code y event.keyCode (este último solo por compatibilidad).

  • Leer modificadores: ctrlKey, shiftKey, altKey, metaKey.

  • Mostrar datos en una tarjeta clara y responsiva (CSS Grid + utilidades).

Código (3 archivos)


1) index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Event KeyCodes</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="wrap" tabindex="-1" aria-describedby="help">
    <h1>Event KeyCodes</h1>
    <p id="help" class="lead">Presiona cualquier tecla (o combina con Ctrl / Alt / Shift / Meta).</p>
    <section class="grid" role="region" aria-live="polite" aria-atomic="true">
      <article class="card">
        <h2 class="label">Tecla</h2>
        <div class="value" id="v-key">—</div>
        <p class="hint">event.key</p>
      </article>
      <article class="card">
        <h2 class="label">Código</h2>
        <div class="value" id="v-code">—</div>
        <p class="hint">event.code</p>
      </article>
      <article class="card">
        <h2 class="label">keyCode</h2>
        <div class="value" id="v-keycode">—</div>
        <p class="hint deprec">event.keyCode (deprecado)</p>
      </article>
      <article class="card">
        <h2 class="label">Detalles</h2>
        <div class="value small" id="v-extra">—</div>
        <p class="hint">location · repetición · modificadores</p>
      </article>
    </section>
    <footer class="tips">
      <p><strong>Tips:</strong> prueba <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Escape</kbd>, flechas, <kbd>F1…F12</kbd>, y con <kbd>Ctrl</kbd>/<kbd>Alt</kbd>/<kbd>Shift</kbd>/<kbd>Meta</kbd>.</p>
    </footer>
  </main>
  <script src="script.js"></script>
</body>
</html>


2) style.css 

* { box-sizing: border-box; }
:root {
  --bg: #0f1115; --txt: #f5f7fa; --muted: #a0a8b8;
  --card: #151a23; --ring: #7c5cff; --accent: #8b5cf6;
  --radius: 18px; --gap: 16px;
}
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #1b2030 0, #0f1115 45%, #0b0e13 100%);
  color: var(--txt);
}
.wrap {
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 16px 32px;
  outline: none;
}
h1 { margin: 0 0 6px; font-size: clamp(28px, 4vw, 44px); }
.lead { margin: 0 0 24px; color: var(--muted); }
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  background: linear-gradient(180deg, #1b2130, var(--card));
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  min-height: 140px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.label { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .4px; }
.value {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  word-break: break-word;
}
.value.small { font-size: clamp(16px, 2.4vw, 18px); line-height: 1.5; white-space: pre-wrap; }
.hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.hint.deprec { color: #ffb4b4; }
.tips { margin-top: 20px; color: var(--muted); }
kbd {
  background: #141b2a;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-color: rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}


3) script.js

const elKey = document.getElementById('v-key');
const elCode = document.getElementById('v-code');
const elKeyCode = document.getElementById('v-keycode');
const elExtra = document.getElementById('v-extra');
const locationMap = {
  0: 'general',
  1: 'left',
  2: 'right',
  3: 'numpad'
};
function formatExtra(e) {
  return [
    `location: ${locationMap[e.location] ?? e.location}`,
    `repeat: ${e.repeat ? 'sí' : 'no'}`,
    `ctrl: ${e.ctrlKey ? 'sí' : 'no'}`,
    `alt: ${e.altKey ? 'sí' : 'no'}`,
    `shift: ${e.shiftKey ? 'sí' : 'no'}`,
    `meta: ${e.metaKey ? 'sí' : 'no'}`
  ].join('\n');
}
function update(e) {
  // Evita que espacios, flechas, etc. hagan scroll no deseado
  if (['ArrowUp','ArrowDown',' '].includes(e.key)) e.preventDefault();
  elKey.textContent = e.key === ' ' ? 'Space' : e.key;
  elCode.textContent = e.code;
  elKeyCode.textContent = e.keyCode ?? '—';
  elExtra.textContent = formatExtra(e);
}
window.addEventListener('keydown', update, { passive: false });
// Accesibilidad: enfoca el contenedor al cargar para que lector de pantalla
// anuncie instrucciones y aria-live muestre actualizaciones con claridad.
window.addEventListener('load', () => {
  document.querySelector('.wrap')?.focus();
});


¿Cómo funciona (y por qué así)?

  • keydown: dispara tan pronto se presiona una tecla (antes que keypress o keyup), ideal para leer datos sin esperar a que se “suelte”.

  • event.key: es el valor legible para humanos (“a”, “Enter”, “ArrowLeft”, “ñ”). Cambia con el layout del teclado.

  • event.code: es el código físico de la tecla (“KeyA”, “Enter”, “ArrowLeft”), estable respecto al layout (útil si necesitas atajos por posición).

  • event.keyCode: deprecado (se mantiene por compatibilidad). Aún se usa en ejemplos viejos; aquí lo mostramos solo informativo.

  • Modificadores y otros:

    • event.location: dónde está la tecla (p. ej., numpad).

    • event.repeat: si el sistema la está repitiendo por mantenerla presionada.

    • ctrlKey, altKey, shiftKey, metaKey: si ese modificador estaba activo.

Accesibilidad & UX

  • Anunciamos cambios con aria-live="polite" y mantenemos el foco en el contenedor principal.

  • Evitamos que Space o ArrowUp/Down hagan scroll poniendo preventDefault() para esos casos.

  • El diseño es responsivo con Grid y tipografías que escalan con clamp().

Ejemplo 

Finalmente aquí hay un ejemplo de la implementación de este proyecto.


Extra: Personaliza en 30 segundos

  • Dark/light: cambia los colores --bg, --card, --txt.

  • Más campos: agrega otro <article> con event.which (también legado) o la hora del evento (Date.now()).

  • Copiar al portapapeles: pon un botón que copie event.code para pegarlo en tus atajos.a









Event KeyCodes
Paris Minero 21 octubre, 2025
Compartir
Nuestros blogs
Iniciar sesión dejar un comentario

  
Progress steps
Guía práctica para construir un visual de pasos de progreso con HTML, CSS y JavaScript — personalizable y accesible