展开选择框时未触发 jQuery keypress/keyup/etc 事件答案

【问题标题】：jQuery keypress/keyup/etc events not fired when select box is expanded展开选择框时未触发 jQuery keypress/keyup/etc 事件
【发布时间】：2012-01-28 18:10:57
【问题描述】：

在此处查看我的代码示例：http://pastebin.com/D1ZctG11

要点是：如果您扩展了一个选择框（通过键盘或鼠标），jquery 的键事件似乎不会触发 - 至少在 Mac Chrome 中不会。

有什么解决方法吗？

我的最终目标是选择用户在使用optgroup 元素时展开选择框时键入的内容。

编辑：

jsfiddle 链接：http://jsfiddle.net/XacfX/

谢谢
穆斯塔法

【问题讨论】：

一些事情会立即浮现在脑海中：活动是否会冒泡？您可以将选择包装在 div 中并在那里捕获它们吗？您使用的是 keydown、keyup 还是 keypress？三个都试试？更好的是，为什么不只是 use a combobox 并替换选择；省点麻烦；）
在第 11 行你有 $(this).attr("id");但“this”将是“e”。此外，您可以考虑使用 console.log 来宣布在您的调试器中触发的事件。
既然您发布了代码，最好将其发布在 jsfiddle.net 上以便我们进行测试
如果有人能给出最简单的解决方法来解决这个问题，我很乐意给他们 50 点声望。最简单的意思是解决问题的最少代码量（同时仍然保留分组）。
我很确定，适用于所有浏览器的“最佳”解决方法是将带有 optgroups 的选择框替换为使用 div 和列表的 javascript 实现，或类似的东西。

标签： javascript jquery

【解决方案1】：

我认为你必须使用 jQuery 的 change()：

http://jsfiddle.net/vvBqE/11/

除非我误解了您，否则您可以通过这种方式查看用户选择了哪个选项。您也可以使用我的示例中的按键事件，但如果用户仅使用鼠标选择选项，则不会触发回调函数。

【讨论】：

我同意。在选择元素上使用键事件似乎不正确。
我也经常找到用户用$('select option:selected').val();选择的值
不确定如何使用 change() 来解决我的问题 - 只有在您在列表中选择新选项后才会触发更改。我发布的问题是询问如何使用OptGroups获取选择列表，以选择符合您在键盘上键入的内容键入的选项展开时选择框。 This works fine when the select box is compact but not expanded on Chrome - browsers seem to differ in how they handle this behavior.
我终于明白你要做什么了。奇怪的是，它在 Windows 7 上的 Chrome 中部分工作。我可以选择关闭和打开下拉列表的选项。但是，从可用性的角度来看，能够输入我不知道它是否存在的东西对我来说没有多大意义。再说一次，我不知道完整的应用程序。

【解决方案2】：

确实有问题，我在任何地方都找不到解释，但这似乎与浏览器即使在浏览器窗口之外也会呈现下拉弹出窗口这一事实有关（尝试使您的浏览器非常小并打开您的下拉菜单，它会留下边界），使其不是典型的文档元素。

一种解决方法是在下拉列表中添加 size

<select name="sel_id" id="sel_id" size=5>
  <option value="0">Choose a new fixer...</option>
    <optgroup label="Group A">
    <option value="6366">Test User useruser</option>
  </optgroup>
  <optgroup label="Group B">
    <option value="5831">First Guy</option>
    <option value="1123">Second Guy</option>
    <option value="7232">Second Second Guy</option>
  </optgroup>
</select>

$(document).keypress(function(e){
    console.log(String.fromCharCode(e.keyCode));
});

我相信周围的一些 DOM 专家可以对此有所了解。

【讨论】：

只有当你设置 size > 1 时才会触发按键事件，但它也有不再呈现为下拉列表而是呈现为一种列表框的效果。谢谢你的想法，不过……很奇怪。

【解决方案3】：

由于这确实似乎有问题，您可能想尝试这样的解决方法：

http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

这会将选择框最终呈现为样式列表。使用该解决方案进行一些调整以启用 optgroups，瞧，您会得到一个与页面内联呈现的下拉框，因此不会阻止关键事件。

从好的方面来说，您还可以随意设置下拉菜单的样式 :)

【讨论】：

我认为这可能是最好的答案，虽然奇怪的是我们不得不求助于这种东西。
链接失效了。它重定向到其他页面。