我有一个基于定制的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事件吗?)

===============>>#1 票数:6 已采纳

您需要做的是将事件侦听器附加到具有id="results"div 您可以通过在创建div时将onkeyuponkeydown等属性添加到div来执行此操作,也可以使用JavaScript附加这些属性。

我的建议是你使用像YUIjQueryPrototype等AJAX库有两个原因:

  1. 听起来你正在尝试创建一个自动完成控件,这是大多数AJAX库应该提供的。 如果您可以使用现有组件,您将节省大量时间。
  2. 即使您不想使用库提供的控件,所有库都提供了有助于隐藏不同浏览器提供的事件API之间差异的事件库。

忘记addEvent,使用Yahoo!的Event Utility可以很好地总结一下事件库应该为您提供的内容。 我很确定jQuery,Prototype等提供的事件库。 人。 提供类似的功能。

如果那篇文章结束了,请先阅读本文档然后重新阅读原文(我发现在使用事件库之后这篇文章更有意义)。

其他几件事:

  • 使用JavaScript可以比在HTML中编写onkeyup等属性提供更多的控制。 除非你想做一些非常简单的事情,否则我会使用JavaScript。
  • 如果您编写自己的代码来处理键盘事件,那么一个好的密钥代码引用非常方便。

===============>>#2 票数:0

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

每次触发keyupkeydown ,更新对数据结构中的active / selected项的引用。 要在UI上提供突出显示信息,请根据项目是否处于活动状态/已选择,添加或删除通过CSS设置样式的类名称。

此外,这不是一个大问题,但innerHTML并不是真正的标准(查看createTextNode()createElement()appendChild()以获取创建数据的标准方法)。 您可能还希望在JavaScript中查看附加事件处理程序,而不是在HTML属性中执行此操作。

  ask by mauriciopastrana translate from so

未解决问题?本站智能推荐:

1回复

Javascript按键/向下/向上事件触发顺序

考虑以下简单代码: 我在Safari 9和FF 51上都尝试过,事件触发的顺序始终是: down -> press -> up 这是很合理的(至少对我而言)。 我的问题是: 是这种标准行为还是某些浏览器(例如IE8等较旧的浏览器)以不同的顺序触发了按键
1回复

如何在Web应用程序中切换选项卡

我正在开发一个Web应用程序,我需要使用键盘通过以下方式打开/切换标签, 当我按Ctrl + Alt + 1 Tab1应该打开。 但是如果不按ctrl和alt,则按2 tab2应该会打开。 我可以实现1和2,但可以释放ctrl和alt键。
3回复

Javascript - 触发特定的键盘键

我有这段代码: 为什么我在控制台看到0而不是65? e.keyCode和e.which都是0而不是65,我在Chrome最新版本 非常感谢。
1回复

JavaScript键盘事件和比较

我编写了一个函数,该函数应检查是否按下了某个特定按钮。 但是,它似乎总是返回false。 这是功能: 这就是您的称呼方式: 检查警报时,当我按“ W”时,它们似乎是相同的数字,但该功能始终返回false。 它们是不同的类型吗?
4回复

对象中的Javascript键盘事件

我的键盘以简单的方式工作: 它奏效了。 然后我试着把它全部放在一堂课: 在初始化中我创建了一个对象: 在主循环我把动作: 现在它失败了。 问题的有趣部分是调用警报(“繁荣!”),因此变量也应该被修改...... 我会很感激任何想法。
5回复

按向上箭头时防止文本输入中的默认行为

我正在使用带有数值的基本HTML <input type="text"/>文本字段。 我添加JavaScript事件keyup看到当用户按下向上箭头键( e.which == 38 ) -然后我增加的数值。 代码运行良好,但有一件事让我感到困扰。 当我按下向上箭头键时,
2回复

如何将键盘焦点放在DIV上并将键盘事件处理程序附加到它?

我正在构建一个应用程序,我希望能够单击由DIV表示的矩形,然后使用键盘通过列出键盘事件来移动该DIV。 而不是在文档级别使用事件监听器来处理那些键盘事件,我可以在DIV级别监听键盘事件,也许是通过给予键盘焦点? 这是一个简化的示例来说明问题: 在单击内部DIV时,我尝试给它焦
3回复

jQuery如何按键盘按钮之一?

这是我的代码: $("input").on({ keydown: function(ev) { if (ev.which === 27){ // esc button backspace_emolator(); } else if (ev.which === 8){ // bac
1回复

在Javascript中精确模拟用户的键盘

一点上下文:我正在开发一个基于HTML5的移动应用程序,该应用程序具有自动完成功能,由于setSelectionRange中的错误而在Android上中断: http : //code.google.com/p/android/issues/detail? id = 15245因此,我不能像通常
2回复

如何使用Javascript键盘事件触发CSS Sprite动画[重复]

这个问题已经在这里有了答案 : 去年关闭。 在JavaScript中触发CSS动画 (3个答案) 检测javascript中按键的最简单方