javascript onchange vs onkeyup事件<Select>菜单(在Firefox中，上下键don&

javascript onchange vs onkeyup events for <Select> menu (Up and Down keys don't fire onchange event in Firefox)

本文关键字：Firefox don 上下 onkeyup vs onchange 事件 javascript Select 菜单      更新时间：2023-09-26

我有一个在IE和Opera中完美工作的<select id="myselect" name="myselect" onChange="(myfunction();)">...</select>。"完美"一词是指当您通过鼠标或"Up"，"Down"，"PageUp"(不用于Opera)，"PageDown"(不用于Opera)，"Home"answers"End"键在选择菜单激活时(蓝色)更改下拉列表中的值时触发的事件。当你使用Firefox, 3.6.15测试时，问题出现了。当你使用"上"answers"下"时，什么都不会发生，但对于鼠标来说，它仍然有效。你推荐使用onkeyup事件吗?我试过了，它"捕捉"上下，但是，IE似乎有onChange和onkeyup事件。但我只需要一件事。人们如何解决这个问题?

谢谢。

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

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

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

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

你可能想把这个限定在Firefox上，但是我猜你必须使用UA嗅探，所以这取决于你是否可以接受。

源

你可以聪明一点，为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();
    }
});
相关文章：