> Faqs > ¿Cómo detectar que se ha pulsado la barra espaciadora en un elemento mediante Javascript?

¿Cómo detectar que se ha pulsado la barra espaciadora en un elemento mediante Javascript?

Quisiera hacer lo siguiente. Tengo un enlace y por accesibilidad, quiero que al posicionarme encima del enlace (mediante el tabululador del teclado) y pulsar la barra espaciadora, entonces lanzar un comportamiento Javascript.

El enlace no va a ningún sitio, solamente me permite que el usuario pueda pararse en él, pulsando el tabulador.

<a href="#" id="elenlace">Enlace</a>

Además también deseo que, si se hace click en el enlace, no se vaya a ningún sitio. Eso lo tengo claro

document.getElementById("elenlace").addEventListener('click', function(e) {
    e.preventDefault();
});

Creo que tendría que agregar eventos de teclado, pero realmente no sé cómo detectar que se ha pulsado específicamente la barra espaciadora.

Respuestas

El código que tendrías que usar es este, más o menos, ajustado a tu comportamiento específico.

document.getElementById("elenlace").addEventListener('keypress', function (e) {
  e.preventDefault();
  if(e.keyCode == 32 || e.code == "Space") {
    // Hacer tu comportamiento
    console.log('Han pulsado la tecla de espacio');
  }
});

El primer e.preventDefault() no sería especialmente necesario, pero es solo para asegurarte que, si pulsan enter (lo que querría decir que quieren ir hacia la ruta del enlace) no se produzca ningún comportamiento de navegación.

Luego simplemente tienes que detectar la tecla espacio, que dependiendo del navegador puede ser de distintas maneras. Este código es lo suficientemente amplio para que funcione en los navegadores usados hoy.

La barra espaciadora la detectas tradicionalmente con e.keyCode == 32 o en navegadores modernos opcionalmente con e.code == "Space".

Alberto
600 15 42 18