javascript onchange vs onkeyup事件 <Select> menu（向上和向下键不会触发Firefox中的onchange事件）

Question

我有一个<select id="myselect" name="myselect" onChange="(myfunction();)">...</select> ，它在IE和Opera中<select id="myselect" name="myselect" onChange="(myfunction();)">...</select>完美。 单词“perfect”表示当您通过鼠标或“Up”，“Down”，“PageUp”（不适用于Opera），“PageDown”（不适用于Opera）更改下拉列表中的值时触发的事件，当选择菜单处于活动状态时，“主页”和“结束”键（蓝色）。 使用Firefox，3.6.Xv测试时出现问题。 使用“向上”和“向下”时没有任何反应，但对于鼠标，它仍然有效。 你建议使用onkeyup活动吗？ 我已经尝试过，它“上下”捕获，但是，IE似乎同时具有onChange和onkeyup事件。 但我只需要一件事。 人们如何解决这个问题？

谢谢。

Answer 1

这是一个相当肮脏的黑客，但你可以通过这样做强制change事件：

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

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

您可能希望将此范围仅限于Firefox，但AFAIK您必须使用UA嗅探，因此如果可以接受，则取决于您。

资源

Answer 2

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

Answer 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();
    }
});