keydown() 上的 .focus() 只运行一次

Question

我需要能够使用箭头键选择一个<a>标签，并使用回车键访问链接。我的实现非常接近，但是经过一些调试后，我似乎无法理解出了什么问题。相关代码如下：

var resultId = 0;
$("#search-input").keydown(function(e) {
var resultIdSelection = "#result-" + resultId;
var key = e.which;
if (key == "38") {
if (resultId > 1) {
e.preventDefault();
console.log(resultIdSelection)
resultId--;
$(resultIdSelection + " .item-link").focus();
}
}
if (key == "40") {
if (resultId < 5) {
e.preventDefault();
console.log(resultIdSelection)
resultId++;
$(resultIdSelection + " .item-link").focus();
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="search-input">
<ul>
<li id="result-0"><a class="item-link" href="#">Item</li>
<li id="result-1"><a class="item-link" href="#">Item</li>
<li id="result-2"><a class="item-link" href="#">Item</li>
<li id="result-3"><a class="item-link" href="#">Item</li>
<li id="result-4"><a class="item-link" href="#">Item</li>
<li id="result-5"><a class="item-link" href="#">Item</li>
</ul>

因此，预期的行为是，当我按下向下键时，它会将焦点向下移动一个元素，如果按下向上键，则向上移动。它也不应超过列表项的最大数量，即 6。

然而，正在发生的事情是，在每次按箭头键时，它只对焦一次。我需要单击输入，然后再次单击向下键以转到下一项。

我不是 100% 确定，但我认为我需要以某种方式弄清楚如何"重置"每个向下箭头键的焦点。我也认为这可能与这里如何处理e.preventDefault()有关，但我在我的keyCode条件中都有。

根据提供的代码，如何最好地多次触发.focus()事件？

Answer 1

问题是您的keydown侦听器仅在焦点位于输入元素上时才触发。因此，一旦用户按一次向上或向下箭头，焦点就会从输入元素移开，侦听器将不再触发。

将侦听器添加到整个文档(或容器元素或每个锚标记)将解决此问题。有关可行的解决方案，请参见下文。

更新：修复了代码以正确应用向上和向下箭头按下的焦点，并在正确的时间更改目标 ID。

var resultId = 0;
$(document).keydown(function(e) {
var resultIdSelection;
var key = e.which;
if (key == "38") {
if (resultId > 0) {
e.preventDefault();
resultId--;
resultIdSelection = "#result-" + resultId;
console.log(resultIdSelection)
$(resultIdSelection + " .item-link").focus();
}
}
if (key == "40") {
if (resultId < 5) {
e.preventDefault();
resultId++;
resultIdSelection = "#result-" + resultId;
console.log(resultIdSelection)
$(resultIdSelection + " .item-link").focus();
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="search-input">
<ul>
<li id="result-0"><a class="item-link" href="#">Item</li>
<li id="result-1"><a class="item-link" href="#">Item</li>
<li id="result-2"><a class="item-link" href="#">Item</li>
<li id="result-3"><a class="item-link" href="#">Item</li>
<li id="result-4"><a class="item-link" href="#">Item</li>
<li id="result-5"><a class="item-link" href="#">Item</li>
</ul>