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

问题描述

|| 我将其标记为

<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();
}

但这是行不通的。     

解决方法

我认为

li

或

a

没有

focus

，您必须自己突出显示它们：更改所选项目的背景色等。     ,像这样的东西可能在jQuery中工作：

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


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