在列表项中启用键盘（向上/向下箭头）

Question

我标记为

<input id="field" type="text" />
 <ul>
  <li class="item"><a href="#">one</a></li>
  <li class="item"><a href="#">two</a></li>
  <li class="item"><a href="#">three</a></li>
  <li class="item"><a href="#">four</a></li>
</ul>

这是一个建议清单。

当#field处于焦点位置时，按向上箭头或向下箭头，我希望能够选择列表中的项目。

那么如何将焦点移到列表中的正确项目上呢？ 我尝试了类似的东西

if (e.keyCode == 40){  //40 for arrow down
     $('.item').first().focus();
}

但这是行不通的。

Answer 1

我认为li或a没有focus ，您必须自己突出显示它们：更改所选项目的背景颜色，等等。

Answer 2

像这样的东西可能在jQuery中工作：

$('.item').focusin(function()
{
   $(this).css('background-color',#highlight_color);
});


$('.item').focusout(function()
{
   $(this).css('background-color',#original_color);
});