Javascript onChange 箭头键答案

【问题标题】：Javascript onChange arrow keysJavascript onChange 箭头键
【发布时间】：2011-07-05 18:17:53
【问题描述】：

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

--编辑 1--

刚刚在 IE 中测试过，方向键确实有效。显然它只是Chrome。 ** 去检查firefox

-- 编辑 2--

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

Internet Explorer 可以识别键盘上的 onChange 事件以及单击它们。 Firefox 和 Chrome 都要求 key 事件后跟 blur 事件才能调用 onChange。

现在通常，我不喜欢 Internet Explorer，因为它是一块垃圾……但我想我……不幸的是，不得不说他们做对了。

我对 chrome 和 firefox 上的 blur 事件的原因的理解是为了节省资源，但我不同意这一点。我觉得它应该遵循命令 onChange 的字面解释......唉......不过我想我可能是错的。

【问题讨论】：

回车或Tab后调用

标签： javascript onchange arrow-keys

【解决方案1】：

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

【讨论】：

你和 AlienWebguy 都做出了适当的回应，但我不能同时接受这两个答案......愚蠢......无论如何，你的答案是对问题的适当回应（如何解决上述问题问题）。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

当输入事件应用时，任何时候用户导致元素的要更改的值，用户代理必须排队一个任务来触发一个简单的在输入元素处冒泡命名输入的事件。

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

测试展示当前值与上一次 onchange 值的对比。

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

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

From W3C:

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

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

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

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

【讨论】：

【解决方案4】：

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

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

因此，您还要为change 注册一个事件监听器，当用户通过上面的代码按下<select> 上的一个键时，该函数将被调用。

您可能只想将此范围限定为 Firefox，但 AFAIK 您必须为此使用 UA 嗅探，因此是否可以接受取决于您。

Source

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

这是这个请求的实现。为简洁起见，仅显示代码。请参阅 https://github.com/ida/skriptz/blob/master/js/fields/select/selection_changed.js 以获取 cmets 中的详细说明。

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)

}

【讨论】：