Jquery Listbox Change 事件不会在键盘滚动时触发答案

【问题标题】：Jquery Listbox Change event does not fire on Keyboard scrollingJquery Listbox Change 事件不会在键盘滚动时触发
【发布时间】：2010-11-17 06:05:44
【问题描述】：

我有一个 HTML 表单上的简单列表框和这个非常基本的 jQuery 代码

    //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    });

当使用鼠标选择当前项目时，更改事件会正常触发，但是当我使用键盘滚动项目时，不会触发事件并且我的代码永远不会执行。

这种行为有原因吗？解决方法是什么？

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

有时更改行为可能因浏览器而异，作为一种解决方法，您可以执行以下操作：

 //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    }).keypress(function() { $(this).change(); });

您可以链接任何您想要的事件并手动触发更改事件。

IE：

var changeMethod = function() { $(this).change(); };
....keypress(changeMethod).click(changeMethod).xxx(changeMethod);

【讨论】：

你说得对，这是由于跨浏览器不兼容造成的。

【解决方案2】：

您描述的行为，即在选择元素中通过键盘滚动触发的更改事件，实际上是 Internet Explorer 错误。 DOM Level 2 Event 规范将change 事件定义为：

当控件发生变化时失去输入焦点及其值自获得焦点以来已被修改。此事件对 INPUT、SELECT、和文本区域。元素。

如果您真的想要这种行为，我认为您应该查看键盘事件。

$("#selCategory").keypress(function (e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 38 || keyCode == 40) { // if up or down key is pressed
     $(this).change(); // trigger the change event
  } 
});

查看示例here...

【讨论】：

那么我怎样才能在 Firefox 中产生这种行为呢？我希望我的内容在列表项更改时更新，而焦点仍在框上。
+1 我发现解决方案除了更改之外还使用 keyup 事件。
您应该注意，如果按住 keydown 直到松开按键，则不会调用 keyup，当按键被按下时，浏览器可能会滚动浏览列表中的不同项目。我会确保这不会对任何依赖主动更改的代码产生负面影响。

【解决方案3】：

在元素失去焦点之前，通常不会触发 onchange 事件。您还需要使用onkeypress。可能是这样的：

var changeHandler = function() {
    $(".prashQs").addClass("hide");
    var cat = $("#selCategory :selected").attr("id");
    cat = cat.substr(1);
    $("#d" + cat).removeClass("hide");
}

$("#selCategory").change(changeHandler).keypress(changeHandler);

您需要 onchange 和 onkeypress 分别考虑鼠标和键盘交互。

【讨论】：

但在这种情况下，我发现按键在除 FireFox 之外的任何浏览器中都不起作用，我在 chrome、safari 和 IE 上进行了测试，但没有成功。
keypress 事件在 chrome 上不起作用，但 keyup 工作正常

【解决方案4】：

我在 JQuery 1.4.1 下使用 IE 时遇到了这个问题 - 如果使用键盘进行更改，组合框上的更改事件不会触发。

似乎已在 JQuery 1.4.2 中修复。

【讨论】：

【解决方案5】：

$('#item').live('change keypress', function() { /* code */ });

【讨论】：

live 已弃用。请改用on，如果您没有使用jQuery 1.7 或更高版本，请使用delegate。