代码之家 › 专栏 › 技术社区 › mauriciopastrana

如何在下拉“选项”之间上下键盘?

keyboard dom events javascript

mauriciopastrana · 技术社区 · 17 年前

我有一个定制的基于Ajax[Div]的动态下拉列表。

我有一个[输入]框; onkeyup ,运行Ajax搜索,返回 div 在使用中收回 innerHTML . 这些 div 都有亮点 onmouseover 因此,典型的成功搜索会产生以下结构(请原谅半代码):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

它起作用了。

但是,我缺少常规HTML元素背后的重要功能。我不能在“选项”之间上下键盘。

我知道javascript可以处理键盘事件,但我找不到好的指南。(当然,接下来的问题是:我能用吗? <ENTER> 触发 onclick 事件?)

2 回复 | 直到 6 年前

Walter Rumsby 17 年前

您需要做的是将事件侦听器附加到 div 具有 id="results" . 您可以通过添加 onkeyup , onkeydown 等属性 div 当你创建它或者你可以使用javascript附加这些。

我的建议是使用类似Ajax的库 YUI , jQuery , Prototype 等等,有两个原因:

听起来你在尝试创建一个 Auto Complete 控件是大多数Ajax库应该提供的。如果您可以使用现有组件,您将节省大量时间。
即使您不想使用库提供的控件,所有库都提供事件库,以帮助隐藏不同浏览器提供的事件API之间的差异。

Forget addEvent, use Yahoo!âs Event Utility 提供事件库应为您提供的内容的良好摘要。我非常确定jquery、prototype等提供的事件库。提供类似的功能。

如果那篇文章超出你的想象,那就看一看。 this documentation 首先,然后重新阅读最初的文章(我发现在使用事件库之后,这篇文章更有意义)。

其他一些事情:

使用Javascript比编写更具控制力 通键 等属性到您的HTML。除非你想做点什么 真简单 我会使用javascript。
如果您编写自己的代码来处理键盘事件 good key code reference 非常方便。

Alexander Elgin 9 年前

在我的头上,我认为您需要在JavaScript中维护某种形式的数据结构,以反映当前下拉列表中的项目。您还需要对当前活动/选定项的引用。

每一次 keyup 或 keydown 被激发,更新对数据结构中活动/选定项的引用。若要提供有关UI的突出显示信息,请添加或删除一个类名称,该类名称是根据项目是否处于活动/选中状态通过CSS设置样式的。

而且,这不是一个大问题,但是 innerHTML 不是很标准(调查 createTextNode() , createElement() 和 appendChild() 用于创建数据的标准方法)。您可能还希望看到有关在javascript中附加事件处理程序的信息,而不是在HTML属性中这样做。