javascript - .focus()在keydown()上仅运行一次

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

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()事件多次触发？

最佳答案

问题是您的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>

关于javascript - .focus()在keydown()上仅运行一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49118177/