Question

好的，所以我们都知道onChange用于在选项更改时在select语句上执行javascript代码。但是，如果使用箭头键更改select语句，则不会调用onChange事件。有没有解决的办法？请帮忙！我知道我是强迫症。

- 编辑1 -

刚刚在IE中测试了这个并且箭头键确实有效。显然它只是Chrome。 **去检查firefox

- 编辑2 -

在Firefox中测试并在下面的答案之前实现了关于更改所需的onBlur操作。所以这里的答案是：

Internet Explorer识别键盘上的onChange事件并单击它们。 Firefox和Chrome都要求关键事件后跟模糊事件才能调用onChange。

现在通常情况下，我不喜欢Internet Explorer，因为它是一块垃圾......但我想......不幸的是，我不得不说他们得到了那个。

我对chrome和firefox上的模糊事件的推理的理解是节省资源，但我不同意这一点。我觉得它应该遵循命令onChange的字面解释......叹息......我想我不管怎么说，我可能错了。

Answer 1

我建议您在Key Up事件中编写所需的代码以捕获按键，并检查密钥代码。希望这有帮助

Answer 2

滚动选择框不会被视为更改。当您模糊（）选择并将新选项值应用于选择元素时，会发生更改。

Answer 3

回过头来看，似乎自从提出这个问题以来，Chrome现在会在关键事件发生之后触发更改。 Firefox似乎还在等待onblur。 http://jsfiddle.net/2aQBN/

$(document).ready(function() {
    $("#test").on("change", function() {
        console.log("Changed.");
    });
});

W3C Specification似乎建议改为使用input事件。

当输入事件适用时，任何时候用户导致元素要更改的值，用户代理必须将任务排队以触发简单的操作气泡在输入元素处命名输入的事件。

但是，对于select元素， ~~Chrome或~~ Firefox中不会显示任何输入事件。（只需输入元素。）

测试演示当前值与最后一次onchange值。

http://jsfiddle.net/teynon/MpyHK/5/

Firefox将更改onmouseover上的值。关键变化也将改变价值。然而，onchange还没有解雇。如果在用户打开选择菜单时提交表单，则会提交当前突出显示的选项。

From W3C:

如果不存在multiple属性，并且该元素未被禁用，那么用户代理应该允许用户选择一个选项元素它的选项列表本身未被禁用。根据这个选项被挑选的元素（通过点击，或通过无焦点更改其值后的元素，或通过菜单命令，或通过任何其他机制），并在相关的用户交互之前事件排队（例如在点击事件之前），用户代理必须设置拾取的选项元素的选择性为true，然后排队a 任务是触发一个简单的事件，命名气泡在选择时更改元素，使用用户交互任务源作为任务源。

https://bugzilla.mozilla.org/show_bug.cgi?id=126379对此进行了长时间的讨论，许多人要求使用箭头键。（还有一些人为改变方法辩护。）

有些用户认为W3C在select元素的change事件的规范中是错误的。而是建议我们建议对规范进行更改，以便我们期望select的{{1}}功能发挥作用。

目前的功能对于大量人员来说显然不是直观的，仅仅基于错误报告的数量。（Mozilla有40个标记为重复。）

Answer 4

这是一个相当肮脏的黑客，但你可以通过这样做强制change事件：

element.addEventListener('keyup', function(evt){
    evt.target.blur();
    evt.target.focus();
}, false);

所以你也为change注册一个事件监听器，当用户通过上面的代码按下<select>上的一个键时，就会调用该函数。

您可能希望将此范围仅限于Firefox，但AFAIK您必须使用UA嗅探，因此如果可以接受，则由您决定。

Source

Answer 5

我正在考虑这样的事情（如果价值没有改变，就不要触发事件）：

            select.keydown(function(){
                var _this = $(this);
                var _val = $(this).val();

                setTimeout(function(){    
                    if(_this.val() !== _val){
                        _this.trigger("change");
                    }
                }, 1);
            });

Answer 6

以下是此请求的实现。为简洁起见，仅显示代码。有关评论中的详细说明，请参阅https://github.com/ida/skriptz/blob/master/js/fields/select/selection_changed.js。

function addSelectionChangedListener(selectionEle, onChangeDoWithEle) {

  var selectedIndex = null

  function onChangeEvent(eve) {
    // If selection-change was caused of an option's click-event:
    if(eve.explicitOriginalTarget.tagName.toLowerCase() == 'option') {
      // We want to trigger passed event-handler:
      onChangeDoWithEle(eve.target)
    }
  }

  function onKeyEvent(eve) {

    // Key-event is keydown, remember current selectedIndex:
    if(eve.type == 'keydown') {
      selectedIndex = eve.target.selectedIndex
    }
    // Key-event is keyup, if selection changed, trigger passed handler:
    else if(selectedIndex != eve.target.selectedIndex) {
      onChangeDoWithEle(eve.target)
    }

  }

  selectionEle.onchange  = function(eve) onChangeEvent(eve)
  selectionEle.onkeydown = function(eve) onKeyEvent(eve)
  selectionEle.onkeyup   = function(eve) onKeyEvent(eve)

}

Javascript onChange箭头键

6 个答案: