<Select> 菜单的 javascript onchange 与 onkeyup 事件（在 Firefox 中向上和向下键不会触发 onchange 事件）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7062262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript onchange vs onkeyup events for <Select> menu (Up and Down keys don't fire onchange event in Firefox)
提问by Haradzieniec
I have a <select id="myselect" name="myselect" onChange="(myfunction();)">...</select>which works perfect in IE and Opera. The word "perfect" means the event fired when you change the values from the drop-list by mouse or by any of "Up", "Down", "PageUp"(not for Opera), "PageDown"(not for Opera), "Home" and "End" keys when select menu is active (blue). The problem appears when you test it using Firefox, 3.6.Xv. Nothing happens when you use "Up" and "Down", but for mouse it still works.
Do you recommend to use onkeyup event? I've tried it, it "catches" up and down, but, IE appears to have both onChange and onkeyup event. But I need just one event.
How do people solve this issue?
我有一个<select id="myselect" name="myselect" onChange="(myfunction();)">...</select>在 IE 和 Opera 中完美运行的工具。“完美”一词表示当您通过鼠标或“向上”、“向下”、“PageUp”（不适用于 Opera）、“PageDown”（不适用于 Opera）中的任何一个更改下拉列表中的值时触发的事件, 选择菜单处于活动状态时的“主页”和“结束”键（蓝色）。当您使用 Firefox, 3.6.Xv 对其进行测试时会出现此问题。当您使用“向上”和“向下”时没有任何反应，但对于鼠标它仍然有效。您是否建议使用 onkeyup 事件？我试过了，它会上下“捕捉”，但是，IE 似乎同时具有 onChange 和 onkeyup 事件。但我只需要一个事件。人们如何解决这个问题？
Thank you.
谢谢你。
回答by Wladimir Palant
I recommend that you keep using the changeevent. The Firefox implementation makes lots of sense for keyboard users. If you tab to the selectelement and choose an entry using Up and Down keys (and you have to press them a lot for a lengthy list) you don't want to trigger tons of actions on the web page. It is ok to have the action executed once you've selected the correct entry and moved on to something else.
我建议您继续使用该change事件。Firefox 的实现对键盘用户很有意义。如果您使用 Tab 键切换到select元素并使用向上和向下键选择一个条目（并且您必须多次按下它们才能获得冗长的列表），您不想在网页上触发大量操作。一旦您选择了正确的条目并继续执行其他操作，就可以执行该操作。
回答by craigpatik
This is a pretty dirty hack, but you can force the the changeevent to fire by doing this:
这是一个非常肮脏的黑客，但您可以change通过执行以下操作强制事件触发：
element.addEventListener('keyup', function(evt){
evt.target.blur();
evt.target.focus();
}, false);
So you'd register an event listener for changeas well, and that function would get called when the user presses a key on the <select>via the code above.
因此，您还需要为其注册一个事件侦听器change，当用户<select>通过上面的代码按下某个键时，该函数将被调用。
You may want to scope this only to Firefox, but AFAIK you'd have to use UA sniffing for that so it's up to you if that's acceptable.
您可能只想将其范围限定为 Firefox，但 AFAIK 您必须为此使用 UA 嗅探，所以这取决于您是否可以接受。
回答by totallyNotLizards
You could be clever and make your own handler for the keyup event which tests the keycode to see if it was an up arrow or down arrow, and fires the change event accordingly.
您可以聪明一点，为 keyup 事件创建自己的处理程序，它测试键代码以查看它是向上箭头还是向下箭头，并相应地触发更改事件。
My own js isn't good enough to write you an example but I could show some example jQuery to do that:
我自己的 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();
}
});
