Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

162
Vistas
Is there a way to focus element from querySelectorAll()?

I want to focus my dropdown elements from keyboard (up and down keys).

My code:

var matches = document.querySelectorAll("div.dropdown-content > a");
var i = 0;
var focused = matches[i];

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            i++;
            focused.focus();
            break;
        case 38:
            i--;
            focused.focus();
            break;
    }
};

But it's actually not working. Console does not report any errors.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Arrow key up is 38, down is 40, also check i range between 0, nodes.length

const matches = document.querySelectorAll('div.dropdown-content > a');
let i = 0;
let focused;
if (matches.length > 0) {
matches[i].focus();
focused = matches[i];
document.onkeydown = function(e) {
    e.preventDefault();
    switch (e.keyCode) {
        case 40:
            if (i < matches.length - 1) {
                i++;
            }
            matches[i].focus();
            focused = matches[i];
            break;
        case 38:
            if (i > 0 ) {
                i--;
            }
            matches[i].focus();
            focused = matches[i];
            break;
    }
};
}
a { display: block; }
<div class="dropdown-content">
 <a href="#">Link</a>
 <a href="#">Link</a>
 <a href="#">Link</a>
 <a href="#">Link</a>
 <a href="#">Link</a>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

You keep focusing the same element, focused is not updated when i changes.

Also, the keycode for down arrow is 40, not 37.

Finally, you should check that i is always between 0 and matches.length - 1.

var matches = document.querySelectorAll("div.dropdown-content > a");
var i = 0;

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 40:
            if(i < matches.length - 1) i++;
            matches[i].focus();
            break;
        case 38:
            if(i > 0) i--;
            matches[i].focus();
            break;
    }
};

You can also focus the first item when you reached the last one and vice versa :

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 40:
            i = (i + 1) % matches.length;
            matches[i].focus();
            break;
        case 38:
            i = Math.abs(i - 1 + matches.length) % matches.length;
            matches[i].focus();
            break;
    }
};
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda