Eventos de teclado en JavaScript: guía definitiva para sacarles partido
por Pepe Robles · Actualizado el 7 de marzo de 2023
Los eventos de teclado en JavaScript son una de las partes que más dinamismo pueden darle a nuestro proyecto.
Vamos a poder capturar pulsaciones de teclas, crear atajos personalizados…etc
Todo ello nos va a permitir mejorar la experiencia del usuario.
En este artículo te voy a mostrar lo que necesitas saber para sacarle provecho a estos eventos.
EVENTOS Y 3 FORMAS DE ESCUCHARLOS
Antes de continuar si aún no sabes muy bien que son los eventos de JavaScript, te recomiendo ver este video corto de apenas 6 minutos.
Aquí vas a poder aprender qué son los eventos y las 3 formas que tienes de escucharlos.
Los eventos son una parte de javascript bastante importante, aquí tienes otra guía que te puede venir bien para aprender javascript.
¿Qué son los eventos de teclado?
Los eventos de teclado en JavaScript son eventos que se activan cuando el usuario interactúa con el teclado.
Puedes usarlos para capturar pulsaciones de teclas individuales o combinaciones de teclas, y luego ejecutar una acción en respuesta.
Algunos ejemplos de acciones que puedes ejecutar incluyen mostrar u ocultar contenido, avanzar o retroceder en una presentación de diapositivas, y navegar entre páginas.
Cómo utilizar los eventos de teclado en JavaScript
Para utilizar los eventos de teclado en JavaScript, debes seguir los siguientes pasos:
- Detectar el evento de teclado
- Capturar la tecla pulsada
- Ejecutar la acción correspondiente
Para detectar el evento de teclado, debes usar el método addEventListener() y especificar el evento de teclado que deseas capturar, como “keydown”, “keyup” o “keypress”.
Detectar el evento de teclado
Diferencias entre keydown, keyup o keypress
- Keydown se lanza cuando se pulsa una tecla
- Keyup cuando se suelta la tecla
- Keypress cuando la tecla pulsada produce el valor
Esto quiere decir que por ejemplo si pulsamos la tecla CTRL, el evento Keypress no se va a ejecutar al no producir valor.
Entre otras cosas es por eso que Keypress se considera ya obsoleto.
Cuando quieras capturar eventos deberías usar Keydown o Keyup.
Así tendrás todo el rango de posibilidades cubierto.
Aquí tienes un ejemplo de cómo utilizar los eventos de teclado en JavaScript para mostrar u ocultar un menú cuando pulsa la tecla Escape:
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
document.getElementById("menu").classList.toggle("hidden");
}
});Capturar la tecla pulsada
keyCode o key
Una vez que detectamos el evento, es hora de capturar la tecla pulsada.
Para ello anteriormente se usaba la propiedad keyCode, pero es algo que ya con el tiempo se ha ido quedando obsoleta.
Lo ideal es usar la propiedad key del evento.
La propiedad key nos va a indicar que tecla está siendo presionada
if (event.key === "Escape")Cómo crear atajos de teclado personalizados
Crear atajos de teclado personalizados es una forma de mejorar la eficiencia del usuario en tu sitio web.
Puedes crear atajos para cualquier acción que desees, como enviar un formulario, cambiar de página o mostrar un modal.
Para crear un atajo de teclado personalizado, debes detectar la combinación de teclas que deseas utilizar y luego ejecutar la acción correspondiente.
Ya que se consideran teclas modificadores, ALT, CTRL o SHITF tienen su propia propiedad que podremos escuchar
altKey, ctrlKey y shiftKey
Aquí tienes un ejemplo de cómo crear un atajo de teclado personalizado en JavaScript para enviar un formulario cuando se pulse CTRL + ENTER
document.addEventListener("keydown", function(event) {
if (event.ctrlKey && event.key === "Enter") {
document.getElementById("myForm").submit();
}
});Cómo detectar combinaciones de teclas
En algunos casos, es posible que desees detectar una combinación de teclas en lugar de una sola tecla.
Por ejemplo, podrías querer detectar la combinación “Ctrl+C” para copiar texto o “Ctrl+V” para pegar texto.
Para detectar combinaciones de teclas, debes utilizar condicionales que comprueben si se han pulsado varias teclas a la vez.
Aquí un ejemplo de cómo detectar la combinación “Ctrl+C” en JavaScript:
document.addEventListener("keydown", function(event) {
if (event.ctrlKey && event.key === "c") {
// Ejecutar la acción correspondiente
}
});Podrías por ejemplo mostrar un dialog o modal indicando que ha copiado correctamente consiguiendo así una mejor experiencia de usuario.
Cómo detectar la tecla de escape
La tecla de escape es una de las teclas más utilizadas en los eventos de teclado.
Por lo general, se utiliza para cerrar una ventana modal, salir de un menú o cancelar una operación.
En JavaScript, puedes detectar la tecla de escape utilizando también la propiedad key.
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
// Ejecutar la acción correspondiente
}
});
Conclusión
Los eventos de teclado en JavaScript son una herramienta poderosa que te permiten mejorar la experiencia del usuario en tu sitio web.
Puedes utilizarlos para capturar pulsaciones de teclas, crear atajos personalizados y mejorar la eficiencia del usuario entre otras cosas.
Si quieres aprender más sobre JavaScript tienes acceso gratuito al curso de javascript en la plataforma de naviscode (acceso gratis solo con tu mail)