键盘上下箭头

Question

我有一个自动完成搜索,通过输入几个字符,它将显示所有名称,与输入的字符匹配.我使用DIV标签在jsp中填充这些数据,使用鼠标我可以选择名称.但我想使用键盘向上和向下箭头选择要在DIV标签中选择的名称.任何人都可以帮助我解决这个问题.

Answer 1

使用onkeydown和onkeyup事件检查结果div中的按键事件:

var UP = 38;
var DOWN = 40;
var ENTER = 13;

var getKey = function(e) {
  if(window.event) { return e.keyCode; }  // IE
  else if(e.which) { return e.which; }    // Netscape/Firefox/Opera
};


var keynum = getKey(e);

if(keynum === UP) {
  //Move selection up
}

if(keynum === DOWN) {
  //Move selection down
}

if(keynum === ENTER) {
  //Act on current selection
}

Answer 2

我假设您有一个处理输入的输入。

为您读出 event.keyCode 的输入映射 onkeyup-eventhandler，并在它是向上/向下箭头 (38, 40) 的适当键码时执行操作，以保留对您所在节点（div 中的项目）的引用将焦点移至。

然后，当您按下 Enter 键（keyCode 13）时，将调用与 onclick 相同的处理程序。

很难给出一个编码示例，因为它高度依赖于上下文，但有关如何浏览 div 的一个技巧是使用 .nextSibling 和 .previousSibling，以及 .firstChild 和 .childNodes。