1

我已经实现了类似于此处示例的 AJAX 搜索。在此示例中，您可能会注意到您可以使用TABkey 在搜索结果之间切换。在我的搜索结果中，有一个格式如下的表格：

*Client*  *Status*  *Hostname*
<client1>   value     value
<client2>   value     value
<client3>   value     value

Client1, client2, client3实际上是超链接并且在类中search_result_entry。因此，当按下向下箭头键时，我希望焦点转到client1链接。键在TAB这里有效，但箭头键会更直观。status 和 hostname 中的值不可点击。另外，请注意我正在使用overflow: auto，因此如果搜索结果过多，则会显示滚动条。在这种情况下，按两次 TAB 键可以让我进入第一个搜索结果。

我正在反复试验并尝试了以下代码，但它不起作用：

if (e.which == 40){    // 40 is the ASCII for down arrow key
    $("#keyword").focusout();
    $("#results").focus(function(){
            $(this).next("td").focus();
    });
}

如何使用向下箭头键将焦点移至搜索结果并使用向下/向上箭头键在其中导航？

4

1 回答 1

1 
//Keep track of the focused element
var focusedElement = null;

// update it on focus
$("#results").focus(function(){
  focusedElement = this;
});

在你的处理程序的某个地方：

//... code
if (e.which == 40){    // 40 is the ASCII for down arrow key
  if(focusedElement) $(focusedElement).next().focus();
  else $('#results').somethingToGetYourFirstElementDependingOnYourCode().focus();
}
//... more code

第一部分将跟踪当前焦点元素（如果有），第二部分将更新焦点元素（这将触发第一部分并更新当前焦点元素）

于 2012-08-07T14:41:56.647 回答