Question

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

要点是：如果你有一个扩展的选择框（通过键盘或鼠标），jquery的关键事件似乎没有激发 - 至少在Mac Chrome中没有。

有任何变通方法吗？

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

编辑：

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

感谢
穆斯塔法

Answer 1

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

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

这会将选择框最终呈现为样式列表。一些调整以启用带有该解决方案的optgroup，并且你有一个与页面内联呈现的下拉框，因此不会阻止关键事件。

在好的方面，您还可以按照自己的方式设置下拉列表：）

Answer 2

我认为你必须使用jQuery的change（）：

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

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

Answer 3

Buggy确实，我无法在任何地方找到解释，但它似乎与浏览器即使在浏览器窗口外呈现下拉菜单这一事实有关（尝试使您的浏览器非常小并打开您的下拉列表，它离开了边界），使其不是典型的文档元素。

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

<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专家可以对这一点有所了解。

扩展选择框时未触发jQuery keypress / keyup / etc事件

3 个答案: