Eventos de Teclado: KeyDown, KeyUp y KeyPress

Uso Básico de KeyDown

El evento keydown es ideal para implementar atajos de teclado, navegación, y validaciones que necesitan prevenir la entrada antes de que ocurra. Se puede usar tanto en elementos específicos (inputs, textareas) como a nivel global (document o window).

Este ejemplo muestra el uso básico de keydown. El evento proporciona información detallada sobre la tecla presionada a través de las propiedades key (valor de la tecla) y code(ubicación física). Puedes prevenir el comportamiento por defecto usando preventDefault(), útil para bloquear ciertas teclas o implementar validaciones personalizadas.

Repetición de Teclas

Una característica importante de keydown es que se dispara repetidamente mientras mantienes presionada una tecla. La velocidad de repetición depende de la configuración del sistema operativo del usuario. Puedes detectar si es una repetición usando la propiedad repeat del evento.

Este ejemplo muestra cómo detectar repeticiones de teclas. La propiedad repeat es true cuando el evento se dispara por mantener presionada una tecla, y false para la primera pulsación. Esto es útil cuando quieres ejecutar una acción solo la primera vez que se presiona una tecla, ignorando las repeticiones automáticas.

Uso Básico de KeyUp

El evento keyup es ideal para acciones que deben ocurrir después de que el usuario termina de presionar una tecla. Comúnmente se usa en combinación con keydown para detectar cuándo comienza y termina una acción, como mantener presionada una tecla para mover un personaje en un juego.

Este ejemplo muestra cómo usar keydown y keyup juntos para detectar cuando una tecla está siendo presionada. Este patrón es fundamental en videojuegos y aplicaciones interactivas donde necesitas saber el estado actual de las teclas (presionadas o no). El objeto teclasPresionadasmantiene un registro de qué teclas están actualmente presionadas.

KeyDown vs KeyUp: Cuándo Usar Cada Uno

Elegir entre keydown y keyup depende de tu caso de uso específico. Keydown es mejor para acciones inmediatas y preventivas, mientras que keyup es mejor para detectar el fin de una acción o para acciones que deben ocurrir después de que el usuario suelta la tecla. Para implementar búsqueda en tiempo real o autocompletado, es recomendable usar keyup en lugar de keydown, ya que con keyup el valor del input ya está actualizado cuando el evento se dispara, permitiéndote leer el valor completo directamente sin necesidad de usar setTimeout.

• <strong>keydown:</strong> Atajos de teclado, validación preventiva, juegos (inicio de acción)
• <strong>keyup:</strong> Búsqueda en tiempo real, fin de acciones, detección de entrada completa
• <strong>keydown + keyup:</strong> Detectar estado de teclas, movimiento continuo en juegos
• <strong>keydown con preventDefault:</strong> Bloquear entrada no deseada antes de que ocurra
• <strong>keyup sin preventDefault:</strong> Ejecutar acciones después de entrada completada

event.key vs event.code

La diferencia entre key y code es fundamental. key representa el valor de la tecla (lo que se escribiría), mientras que code representa la ubicación física de la tecla en el teclado. La elección entre ambos depende de tu caso de uso.

Este ejemplo muestra la diferencia entre key y code. Si presionas la tecla A en un teclado QWERTY:key será "a" o "A" (dependiendo de Shift), mientras que code siempre será "KeyA". Usa key cuando te interese el carácter escrito (validación, autocompletado), ycode cuando te interese la posición física (juegos, atajos universales).

Otras Propiedades Útiles

Además de key y code, el KeyboardEvent proporciona varias propiedades útiles que te dan información adicional sobre el contexto de la pulsación de tecla. Estas propiedades te permiten crear interacciones más sofisticadas.

• <strong>key:</strong> El valor de la tecla ('a', 'Enter', 'ArrowUp', etc.)
• <strong>code:</strong> La ubicación física ('KeyA', 'Enter', 'ArrowUp', etc.)
• <strong>repeat:</strong> true si la tecla se mantiene presionada (solo keydown)
• <strong>location:</strong> Ubicación de la tecla (0=estándar, 1=izquierda, 2=derecha, 3=numpad)
• <strong>isComposing:</strong> true durante composición de caracteres (ej: acentos en español)

Este ejemplo muestra todas las propiedades principales del KeyboardEvent. La propiedad locationes útil cuando necesitas distinguir entre teclas duplicadas (Shift izquierdo vs derecho, Ctrl izquierdo vs derecho). La propiedad isComposing es importante para aplicaciones internacionales que soportan métodos de entrada de texto complejos.

Detectar Teclas Modificadoras

Cada tecla modificadora tiene su propia propiedad booleana: shiftKey, ctrlKey,altKey, y metaKey. Estas propiedades son true cuando la tecla está presionada junto con otra tecla. Son esenciales para implementar atajos de teclado estilo desktop en aplicaciones web.

Este ejemplo muestra cómo detectar teclas modificadoras. La tecla Meta es la tecla Command (⌘) en Mac y la tecla Windows en PC. Para atajos de teclado universales, es común usar ctrlKey || metaKeypara soportar tanto Ctrl en Windows/Linux como Command en Mac, proporcionando una experiencia consistente en todas las plataformas.

Implementar Atajos de Teclado

Los atajos de teclado mejoran significativamente la productividad de los usuarios avanzados. Implementarlos correctamente requiere combinar teclas modificadoras con teclas normales, y prevenir el comportamiento por defecto del navegador cuando sea necesario.

Este ejemplo muestra cómo implementar atajos de teclado comunes como Ctrl+S para guardar y Ctrl+Z para deshacer. Es crucial llamar a preventDefault() para evitar que el navegador ejecute su acción por defecto (como abrir el diálogo de guardar). Para una mejor experiencia, también proporciona feedback visual al usuario sobre los atajos disponibles.

Validación de Entrada en Tiempo Real

Validar la entrada del usuario en tiempo real proporciona feedback inmediato y evita que se ingresen datos inválidos. Esto es especialmente útil para campos que solo deben aceptar ciertos caracteres, como números, letras, o formatos específicos.

Este ejemplo muestra cómo validar entrada permitiendo solo ciertos tipos de caracteres. Para campos numéricos, permitimos números y teclas de navegación (flechas, backspace, delete). Para campos de texto, validamos el formato completo cuando el usuario termina de escribir (keyup). Recuerda que la validación client-side debe complementarse con validación server-side para seguridad.

Navegación por Teclado

Implementar navegación por teclado es crucial para la accesibilidad. Permite que usuarios que no pueden usar el mouse naveguen tu aplicación eficientemente usando solo el teclado. Las flechas, Tab, Enter y Escape son las teclas más comunes para navegación.

Este ejemplo implementa navegación por teclado en una lista. Las flechas arriba/abajo permiten moverse entre items, Enter selecciona el item actual, y Escape cierra la lista. Este patrón es estándar en dropdowns, menús, y listas seleccionables. Asegúrate de mantener visible el item seleccionado usandoscrollIntoView() cuando sea necesario.