Javascript 空间导航

我想在获得tabindex的元素上创建导航，通过按向上键，我想获得该元素的索引，将其传递给计数器，并将下一个元素设置为活动。问题是我不能得到被聚焦元素的索引。代码：

var focusable = Array.from(document.querySelectorAll('[tabindex]'));
focusable[1].focus()
window.addEventListener('keydown', function(e) {
  var counter;
  if (e.keyCode == '38') {
    //here i want to pass the index of elment 
    //from array which is focused and pass it to counter
    console.log('up');
    counter++
    console.log(counter)
    focusable[counter].focus()
  }
});

---

您的

querySelectorAll（“[tabindex]”）

不会返回任何元素，除非它们专门设置了

tabindex

属性（仅在元素上使用该属性是不够的），但是如果您填充了数组，那么类似这样的事情如何：

//确保所有预期元素都已放置到数组中：
var focusable=Array.from（document.querySelectorAll（'input，select，textarea，button'）；
console.log（可聚焦）；//试验
//第一项是项0，而不是1
可聚焦[0]。聚焦（）
//这需要在事件处理程序之外，否则每次按下一个键时它都会被重置
var计数器=0；
window.addEventListener（'keydown'，函数（e）{
如果（e.keyCode=='38'{
//不能让计数器高于最大索引
计数器=（计数器===可聚焦的.length-1）？0:+计数器；
focusable[counter].focus（）；//将焦点设置为数组中的下一项
}
});

测试
测试