Detectar y manejar pulsaciones de teclas de tabulación en JavaScript

JavaScript cuenta con un método incorporado para detectar pulsaciones de teclas del teclado y múltiples formas de manejar estos eventos. Puede configurar detectores de eventos en todo su código, lo cual es una excelente manera de garantizar que los eventos deseados solo sucedan cuando se seleccionen los elementos correctos.

Dicho esto, las teclas específicas del teclado tienen funciones predeterminadas en la mayoría de los navegadores y, de hecho, en la mayoría de los sistemas operativos. Por ejemplo, si usa F1 en la mayoría de los navegadores, se abrirá una página de ayuda y la tecla F5 actualizará la página actual.

Lo mismo ocurre con la tecla Tab, que se utiliza para recorrer hipervínculos y cuadros de texto en la mayoría de los navegadores. Sin embargo, aún puede detectar este evento usando JavaScript y realizar acciones específicas cada vez que se presiona la tecla Tab. Por ejemplo, es posible que desee hacer algo con el hipervínculo seleccionado o incluso cambiar las propiedades de la entrada de texto cada vez que un usuario cambie a ella usando Tab.

Aquí hay un ejemplo de cómo puede agregar un detector de eventos para la tecla Tab:

Cree un detector de eventos para detectar cuándo se presiona la tecla Tab en JavaScript

<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>

document.addEventListener('keyup', detectTabKey);

function detectTabKey(e) {
  if (e.keyCode == 9) {
    activeElem = document.activeElement;
    console.log(activeElem.href);
  }
}

Producción :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

El código JavaScript anterior tiene dos partes funcionales:

1. El método document.addEventListener() toma dos argumentos: el tipo de evento que desea escuchar (en este caso, es el evento keyup), y la función que desea ejecutar cuando el evento es motivado.
2. Nuestra función personalizada detectTabKey() comprueba si el código de tecla para el evento es el mismo que el de la tecla Tab. Si es una coincidencia, imprima el hipervínculo a la consola.

Agregue más lógica para garantizar que solo los elementos <a> activen el detector de eventos

Es posible que algunos de ustedes ya hayan detectado un problema con el método anterior: ¿Qué sucede si nuestra página web tiene cuadros de texto de entrada? Si ese es el caso, al presionar la tecla Tab también se desplazará a través de ellos, y dado que no tienen el atributo href, nuestra función no funcionará según lo previsto.

Afortunadamente, JavaScript no arrojará un error si ese es el caso, pero imprimirá undefined cada vez que se seleccione una entrada de texto. Para asegurarnos de que eso no suceda, debemos agregar un paso en nuestra función detectTabKey().

Agreguemos un nuevo elemento a nuestro código HTML:

<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>

<input type="text" placeholder="Text Box">

Si mantenemos el mismo código JavaScript que antes, la salida se verá así:

Producción :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
undefined

Para solucionar esto, necesitamos agregar otra declaración if en nuestra función detectTabKey(). Aquí está el código final:

document.addEventListener('keyup', detectTabKey);

function detectTabKey(e) {
  if (e.keyCode == 9) {
    activeElem = document.activeElement;
    if (activeElem.tagName.toLowerCase() == 'a') {
      console.log(activeElem.href);
    }
  }
}

Producción :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

El cuadro de texto no activa nuestra función incluso cuando se selecciona como elemento activo, ya que no cumple con la nueva condición. Como tal, el código solo imprimirá el atributo href si el elemento actualmente activo tiene la etiqueta a adjunta. También agregamos el método .toLowerCase() para asegurarnos de no perder ningún elemento.