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

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

Answer 2

滚动选择框不被视为更改。当您对选择进行模糊处理并将新选项值应用于选择元素时，就会发生更改。

Answer 3

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

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

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

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

但是，在 Chrome 或 Firefox 中，选择元素似乎不会触发任何输入事件。 （只需输入元素。）

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

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

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

来自 W3C：

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

https://bugzilla.mozilla.org/show_bug.cgi?id 有一个很长的讨论=126379 关于这一点，很多人都要求方向键能够工作。 （还有一些人为 onchange 方法辩护。）

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

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

Answer 4

这是一个相当肮脏的黑客，但您可以通过执行以下操作强制触发 change 事件：

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

因此您还可以为 change 注册一个事件侦听器，并且当用户通过上面的代码按下 上的按键时，函数将被调用。

您可能只想将其范围限制在 Firefox 上，但据我所知，您必须使用 UA 嗅探来实现这一点，所以这取决于您是否可以接受。

来源< /a>

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)

}