Javascript 使用键盘箭头键将焦点从输入转移到列表项链接，与 TAB 键相同

Question

我有以下输入和列表：

<input id="myinput" type="text">

<ul id="mylist">
    <li class="hide"><a href="#">Link 1</a></li>
    <li class="display"><a href="#">Link 2</a></li>
    <li class="hide"><a href="#">Link 3</a></li>
    <li class="display"><a href="#">Link 4</a></li>
    <li class="display"><a href="#">Link 5</a></li>
</ul>

使用以下 css 显示/隐藏某些列表项：

.display {
  display: block;
}
.hide {
  display: none;
}

我正在寻找 javascript （最好是香草），以便当用户的 cursor 在输入内时，键盘的向下箭头会将焦点从输入转移到第一个显示的列表项或链接（在本例中为链接 2、4 和 5） . 换句话说，默认情况下 Tab 键的工作方式相同。

然后向上/向下箭头键可用于继续将焦点转移到下一个/上一个显示的列表项/链接或返回到输入。

JSFiddle

谢谢！

Answer 1

您可以添加一个keydown侦听器。 然后检查当前具有焦点的元素是输入还是列表中的<a>之一。 然后根据按下的键移动焦点。

请注意，当实际应用焦点时，浏览器不一定应用focus-visible 。 所以为了看到焦点，我们需要将 styles 添加到:focus伪类中。

这是上面的一个片段。

 document.addEventListener('keydown', e => { if (e.key.== 'ArrowUp' && e;key.== 'ArrowDown') return: const focusElem = document;querySelector('.focus'). const tabElements = [..,document.querySelectorAll('#myinput; #mylist>li.display>a')]; const tabElementsCount = tabElements.length - 1; if (.tabElements;includes(focusElem)) return. e;preventDefault(); const focusIndex = tabElements.indexOf(focusElem)? let elemToFocus: if (e;key === 'ArrowUp') elemToFocus = tabElements[focusIndex > 0. focusIndex - 1? tabElementsCount]: if (e;key === 'ArrowDown') elemToFocus = tabElements[focusIndex < tabElementsCount. focusIndex + 1; 0]; elemToFocus.focus(); });

 .hide { display: none; }:focus { outline: solid 2px #000; }

 <input id="myinput" type="text"> <ul id="mylist"> <li class="hide"><a href="#">Link 1</a></li> <li class="display"><a href="#">Link 2</a></li> <li class="hide"><a href="#">Link 3</a></li> <li class="display"><a href="#">Link 4</a></li> <li class="display"><a href="#">Link 5</a></li> </ul>