<Select> 菜单的 javascript onchange vs onkeyup 事件（向上和向下键在 Firefox 中不会触发 onchange 事件）答案

【问题标题】：javascript onchange vs onkeyup events for <Select> menu (Up and Down keys don't fire onchange event in Firefox)<Select> 菜单的 javascript onchange vs onkeyup 事件（向上和向下键在 Firefox 中不会触发 onchange 事件）
【发布时间】：2011-08-15 06:37:38
【问题描述】：

我有一个<select id="myselect" name="myselect" onChange="(myfunction();)">...</select>，它在 IE 和 Opera 中完美运行。 “完美”一词表示当您通过鼠标或“Up”、“Down”、“PageUp”（不适用于 Opera）、“PageDown”（不适用于 Opera）中的任何一个更改下拉列表中的值时触发的事件, "Home" and "End" keys when select menu is active (blue).当您使用 Firefox 3.6.Xv 对其进行测试时，就会出现问题。当您使用“向上”和“向下”时没有任何反应，但对于鼠标它仍然有效。你推荐使用 onkeyup 事件吗？我已经尝试过了，它上下“捕捉”，但是，IE 似乎同时具有 onChange 和 onkeyup 事件。但我只需要一个事件。人们如何解决这个问题？

谢谢。

【问题讨论】：

当dom元素失去焦点且值发生变化时，firefox会触发change-event。

标签： javascript firefox select onchange

【解决方案1】：

我建议您继续使用change 事件。 Firefox 的实现对键盘用户来说很有意义。如果您切换到select 元素并使用向上和向下键选择一个条目（并且您必须多次按它们以获得冗长的列表），您不想在网页上触发大量操作。一旦您选择了正确的条目并继续执行其他操作，就可以执行该操作。

【讨论】：

【解决方案2】：

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

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

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

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

Source

【讨论】：

【解决方案3】：

您可以很聪明，为 keyup 事件创建自己的处理程序，该处理程序测试键码以查看它是向上箭头还是向下箭头，并相应地触发更改事件。

我自己的 js 不足以给你写一个例子，但我可以展示一些例子 jQuery 来做到这一点：

$('yourSelect').keyup(function(e)
{

    if (e.keyCode===38)
    {
        //this is an up arrow press

        //trigger the change event
        $('yourSelect').change();
    }
    else if (e.keyCode===40)
    {
        //down arrow has pressed

        //trigger the change event
        $('yourSelect').change();
    }
});

【讨论】：

可以使用字母（如在 explorer.exe 中）和使用 pgup/pgdown 来选择