Cómo detectar eventos de entrada de teclado en JavaScript

La entrada de teclado en una página web se gestiona con eventos de teclado. Registre un detector con addEventListener() y luego lea el objeto de evento pasado a su función de devolución de llamada. Utilice keydown para responder cuando se pulsa una tecla y keyup para responder después de que se suelta.

Escuchar eventos de teclado con addEventListener()

Adjunte el detector al elemento que debe recibir la entrada. Utilice document cuando la página deba responder mientras el foco está en cualquier lugar de la página, o adjúntelo a un control de formulario cuando el comportamiento pertenezca a ese control. La función de devolución de llamada recibe un KeyboardEvent como parámetro, así que nombre ese parámetro y lea sus propiedades en lugar de confiar en un valor event global.

Esta ilustración ejecutable utiliza un pequeño sustituto de document y proporciona un evento de tecla, por lo que su forma de detector se puede probar en un entorno de ejecución de JavaScript. En un navegador, utilice el document real para recibir la entrada de teclado.

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

Un navegador real llama a la función de devolución de llamada cuando el usuario pulsa una tecla. El sustituto anterior la invoca con un objeto que contiene el mismo valor key utilizado por el controlador; no simula la entrada del navegador ni otro comportamiento de KeyboardEvent.

Elegir entre keydown y keyup

Un evento keydown se produce cuando se pulsa una tecla. Es una buena opción para acciones que deben comenzar de inmediato, como mover un personaje de un juego mientras se mantiene pulsada una tecla. Un evento keyup se produce cuando se suelta la tecla, lo que se adapta a las acciones que deben ocurrir una vez que el usuario termina de mantener pulsada una tecla. Elija el evento en función de cuándo debe ocurrir la acción. Una tecla mantenida pulsada puede producir eventos keydown repetidos, así que téngalo en cuenta cuando una acción deba ocurrir solo una vez.

Leer KeyboardEvent.key y manejar teclas especiales

Utilice event.key para identificar la tecla en un controlador. Devuelve valores legibles como "a", "Enter" y "ArrowDown", lo que hace que las comparaciones sean sencillas. Por ejemplo, un controlador de teclas de flecha puede comprobar si event.key === "ArrowDown" antes de mover un elemento hacia abajo. El estado de los modificadores también está disponible en el evento, a través de propiedades como event.shiftKey y event.ctrlKey.

El valor de event.key refleja el significado de la tecla según la disposición del teclado activa y los modificadores. Utilice event.code cuando el comportamiento deba seguir una posición física de la tecla, como un control de juego que permanece en el mismo lugar en todas las disposiciones. Para comandos ordinarios y teclas con nombre, event.key suele ser la opción más clara.

Evitar la acción predeterminada de una tecla cuando sea necesario

Un controlador de eventos de teclado puede llamar a event.preventDefault() para suprimir una acción del navegador asociada a esa tecla, como el desplazamiento cuando se utiliza una tecla de flecha para una interfaz personalizada. Llámelo solo cuando la página asuma la responsabilidad de esa acción, y compruebe event.cancelable cuando el comportamiento dependa de la cancelación. No impide que el evento llegue a otros detectores; utilice métodos de propagación solo cuando ese sea también el comportamiento deseado. La detección ordinaria de teclas no necesita cancelación.

Por qué keypress suele evitarse

Evite utilizar keypress para la nueva gestión del teclado. Está en desuso y no cubre toda la gama de teclas de manera consistente. Utilice keydown o keyup para observar las acciones del teclado y event.key para leer el valor de la tecla. No dependa de event.char ni de la propiedad heredada keyCode para el código actual; utilice las propiedades de evento estándar que describen la tecla y su estado.