El Atributo ONKEYDOWN

El atributo onkeydown es un evento de JavaScript que se activa cuando el usuario presiona una tecla (antes de soltarla). Es útil para manejar interacciones de teclado en tiempo real, crear atajos de teclado, validar entradas o controlar elementos multimedia/juegos.

¿Dónde se aplica?

Funciona en elementos que pueden recibir foco:

• <input> (todos los tipos).

• <textarea>.

• <select>.

• Elementos con tabindex (ej: <div tabindex="0">).

• El objeto global document o window.

Sintaxis básica

Como atributo HTML (inline):

<input type="text" onkeydown="console.log('Tecla presionada:', event.key)">

Con JavaScript (recomendado):

document.addEventListener("keydown", (e) => {
  console.log("Tecla:", e.key, "Código:", e.code);
});

Ejemplos prácticos

Ejemplo 1: Bloquear teclas específicas

<input type="text" placeholder="No números" 
  onkeydown="if (event.key >= '0' && event.key <= '9') event.preventDefault()">

Ejemplo 2: Atajo de teclado (Ctrl + S)

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    guardarDocumento(); // Función personalizada
  }
});

Ejemplo 3: Movimiento con flechas en un juego

<div id="jugador" style="position: absolute; left: 50px; top: 50px;">▲</div>

<script>
  const jugador = document.getElementById("jugador");
  let posX = 50, posY = 50;

  document.addEventListener("keydown", (e) => {
    const velocidad = 10;
    switch(e.key) {
      case "ArrowUp": posY -= velocidad; break;
      case "ArrowDown": posY += velocidad; break;
      case "ArrowLeft": posX -= velocidad; break;
      case "ArrowRight": posX += velocidad; break;
    }
    jugador.style.transform = `translate(${posX}px, ${posY}px)`;
  });
</script>

Propiedades clave del evento keydown

Accede a información útil desde el objeto event:

• event.key: Nombre de la tecla (ej: "Enter", "a", "Escape").

• event.code: Código físico de la tecla (ej: "KeyA", "ArrowLeft").

• event.ctrlKey, event.shiftKey, event.altKey: Estado de teclas modificadoras.

• event.repeat: true si la tecla se mantiene presionada.

Diferencias entre eventos de teclado

Evento	Descripción	Momento de activación
onkeydown	Al presionar una tecla (antes de soltar)	Inmediatamente
onkeypress	Al presionar una tecla que produce carácter	Obsoleto, evita su uso
onkeyup	Al soltar una tecla	Después de liberar

Mejores prácticas

Usar event.key en lugar de event.keyCode:

JavaScript:

keyCode está obsoleto. event.key es más legible:

if (event.key === "Enter") { ... }

Manejar teclas modificadoras con cuidado:

JavaScript:

if (event.ctrlKey && event.key === "c") {
  console.log("Ctrl + C presionado");
}

Evitar conflictos con accesos directos del navegador:

Usa event.preventDefault() con precaución para no bloquear acciones como Ctrl + R (recargar):

if (event.ctrlKey && event.key === "s") {
  event.preventDefault(); // Evita el guardado del navegador
  guardarDatos();
}

Accesibilidad:

• Proporciona alternativas para usuarios que no usan teclado.

• Usa role y aria para elementos interactivos.

Casos avanzados

Sistema de búsqueda con teclado:

<input type="text" id="buscador" placeholder="Buscar...">
<script>
  document.getElementById("buscador").addEventListener("keydown", (e) => {
    if (e.key === "/" && document.activeElement !== e.target) {
      e.preventDefault();
      e.target.focus();
    }
  });
</script>

Navegación por pestañas con teclado:

<div class="tab" tabindex="0" onkeydown="manejarTecladoTabs(event)">Tab 1</div>
<div class="tab" tabindex="0" onkeydown="manejarTecladoTabs(event)">Tab 2</div>

<script>
  function manejarTecladoTabs(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.target.click(); // Activa la pestaña al presionar Enter/Espacio
    }
  }
</script>

Errores comunes

<!-- MAL: Usar en elementos no enfocables -->
<div onkeydown="..."></div> <!-- No funciona sin tabindex -->

<!-- CONFUSIÓN: Usar keyCode obsoleto -->
<script>
  elemento.addEventListener("keydown", (e) => {
    if (e.keyCode === 13) { ... } // ¡Usar event.key === 'Enter'!
  });
</script>

<!-- BLOQUEAR ACCIONES SIN AVISO -->
<script>
  document.addEventListener("keydown", (e) => {
    e.preventDefault(); // ¡Bloquea todas las teclas!
  });
</script>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ v12+
Safari	✅ v6.1+
Edge	✅ Todas versiones
Móviles	✅ Sí (iOS/Android)	Teclados virtuales pueden variar

Conclusión

El atributo onkeydown es esencial para:

• Crear interacciones avanzadas con el teclado.
• Implementar atajos profesionales (ej: Ctrl+S, flechas para juegos).
• Mejorar la accesibilidad en aplicaciones web.

Recuerda:

1. Evita depender de keyCode (usa event.key o event.code).
2. Prueba en diferentes teclados (QWERTY, AZERTY, etc.).
3. Respeta las convenciones de accesibilidad (ej: tabindex).

¡Ahora puedes crear experiencias interactivas controladas por teclado como un profesional!