8

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

--编辑1--

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

-- 编辑 2 --

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

Internet Explorer 从键盘识别 onChange 事件并单击它们。Firefox 和 Chrome 都需要在 key 事件之后跟随 blur 事件才能调用 onChange。

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

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

4

6 回答 6

4

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

于 2011-07-05T18:21:50.840 回答
4

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

于 2011-07-05T18:24:28.870 回答
4

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

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

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

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

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

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

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

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

来自 W3C：

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

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

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

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

于 2013-06-19T13:43:52.970 回答
2

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

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

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

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

来源

于 2013-11-19T15:22:21.010 回答
0

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

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

                setTimeout(function(){    
                    if(_this.val() !== _val){
                        _this.trigger("change");
                    }
                }, 1);
            });
于 2015-08-10T11:50:25.377 回答
0

这是此请求的实现。为简洁起见，仅显示代码。有关评论中的详细解释，请参阅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)

}
于 2018-04-20T12:40:29.993 回答