Javascript onChange 方向键

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

回到这一点，似乎自从提出这个问题以来，Chrome 现在会在关键事件之后触发 onChange。 Firefox 似乎仍在等待 onblur。 http://jsfiddle.net/2aQBN/

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

W3C 规范似乎建议使用input事件。

当输入事件应用时，只要用户改变元素的值，用户代理必须排队一个任务来触发一个简单的事件，该事件在输入元素上冒泡命名输入。

但是，对于 select 元素， Chrome 或 Firefox 中似乎没有触发输入事件。 （只是输入元素。）

测试演示当前值与上一个 onchange 值的对比。

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

Firefox 将更改值 onmouseover。 键更改也会更改值。 但是，onchange 并未触发。 如果在用户打开 select 菜单时提交表单，则提交当前突出显示的选项。

来自 W3C：

如果 multiple 属性不存在，并且元素没有被禁用，那么用户代理应该允许用户在其选项列表中选择一个本身未被禁用的选项元素。 在选择此选项元素时（通过单击，或通过在更改其值后取消聚焦元素，或通过菜单命令或通过任何其他机制），并且在相关的用户交互事件排队之前（例如，在点击事件之前)，用户代理必须将所选择的选项元素的选择性设置为 true，然后将任务排队以触发一个简单的事件，该事件在 select 元素处冒泡名为 change，使用用户交互任务源作为任务源。

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

一些用户建议 W3C 在select元素change事件的规范中完全错误。 相反，建议我们建议对规范进行更改，以了解我们期望select的onchange功能如何工作。

仅基于错误报告的数量，当前的功能显然对很多人来说并不直观。 （Mozilla 有 40 个被标记为重复。）

Answer 2

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

Answer 3

滚动浏览 select 框不被视为更改。 当您 blur() select 并将新选项值应用于 select 元素时，就会发生更改。

Answer 4

这是一个非常肮脏的hack，但是您可以通过执行以下操作强制触发change事件：

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

因此，您还需要注册一个事件侦听器以进行change ，并且当用户通过上面的代码按下<select>上的键时，将调用 function。

您可能只希望 scope 到 Firefox，但 AFAIK 您必须为此使用 UA 嗅探，所以如果可以接受，这取决于您。

资源

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)

}