Eventos de teclado en JavaScript: guía definitiva para sacarles partido

Pepe avatar

por Pepe Robles · Actualizado el 7 de marzo de 2023

evento-de-teclado-javascript-guia-definitiva-para-sacarle-partido

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

3-pasos-eventos-en-javascript

Para utilizar los eventos de teclado en JavaScript, debes seguir los siguientes pasos:

  1. Detectar el evento de teclado
  2. Capturar la tecla pulsada
  3. 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)

Ir a la plataforma de cursos

¿Conoces a alguien a quien pueda interesarle? comparte!