Quiero enfocar mis elementos desplegables desde el teclado (teclas arriba y abajo).
Mi código:
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; } };Pero en realidad no está funcionando. La consola no reporta ningún error.
La tecla de flecha hacia arriba es 38 , hacia abajo es 40 , también verifique el rango entre 0, i
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>Sigues enfocando el mismo elemento, el focused no se actualiza cuando cambia i
Además, el código clave para la flecha hacia abajo es 40 , no 37 .
Finalmente, debe verificar que i siempre esté entre 0 y 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; } };También puede enfocar el primer elemento cuando llegó al último y viceversa:
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; } };