提问人：mauriciopastrana 提问时间：8/7/2008 最后编辑：Ijas Ameenudeenmauriciopastrana 更新时间：1/18/2019 访问量：2035
如何在下拉“选项”之间按下或向上键盘？
How to keyboard down or up between dropdown "options"?
问：
我有一个自定义构建的基于 ajax [div] 的动态下拉列表。
我有一个 [输入] 框;，则运行 Ajax 搜索，该搜索在 s 中返回结果，并使用 .这些都有亮点，因此，典型的成功搜索会产生以下结构（请原谅半代码）：onkeyupdivinnerHTMLdivonmouseover
[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
答：
1赞
Tom
8/8/2008
#1
在我的脑海中，我认为您需要在 JavaScript 中维护某种形式的数据结构，以反映当前下拉列表中的项目。您还需要对当前活动/选定项目的引用。
每次触发 或 时，更新对数据结构中活动/选定项的引用。若要在 UI 上提供突出显示信息，请根据项目是否处于活动状态/选中状态添加或删除通过 CSS 设置样式的类名。keyupkeydown
此外，这并不是什么大问题，但并不是真正的标准（查看 、 和创建数据的标准方法）。您可能还想了解如何在 JavaScript 中附加事件处理程序，而不是在 HTML 属性中执行此操作。innerHTMLcreateTextNode()createElement()appendChild()
8赞
Walter Rumsby
8/18/2008
#2
您需要做的是将事件侦听器附加到 with .您可以通过在创建时添加 、 等属性来做到这一点，也可以使用 JavaScript 附加这些属性。divid="results"onkeyuponkeydowndiv
我的建议是你使用AJAX库，如YUI，jQuery，Prototype等，原因有两个：
- 听起来您正在尝试创建一个“自动完成”控件，这是大多数 AJAX 库应该提供的内容。如果可以使用现有组件，则可以节省大量时间。
- 即使不想使用库提供的控件，所有库都提供事件库，以帮助隐藏不同浏览器提供的事件 API 之间的差异。
忘掉 addEvent，使用 Yahoo！ 的 Event Utility 很好地总结了事件库应该为你提供什么。我很确定 jQuery、Prototype 等提供的事件库。提供类似的功能。
如果那篇文章超出了你的脑海，请先看一下这个文档，然后重新阅读原来的文章（我发现这篇文章在我使用事件库后更有意义）。
其他几件事：
- 使用 JavaScript 比将 etc. 属性写入 HTML 要多得多。除非你想做一些非常简单的事情，否则我会使用 JavaScript。
onkeyup - 如果您编写自己的代码来处理键盘事件，那么一个好的键代码引用非常方便。
评论