通过javascript在选择框中按下箭头键答案

【问题标题】：Firing down arrow key press in a select box via javascript通过javascript在选择框中按下箭头键
【发布时间】：2011-02-07 15:13:44
【问题描述】：

出于奇怪的原因，我必须通过模拟鼠标和按键事件来更改下拉框中的选定元素，而不是通过 e.selectedIndex。

我尝试了以下方法：

//e = the dropdown
e.focus();

//my custom function to fire mouse events. This opens the dropdown.     
fireMouseEvent("mousedown", e);

//firing the key press, tried it via keydown, keypress and keyup. Nothing works.
var evt = e.ownerDocument.createEvent("KeyEvents");
evt.initKeyEvent("keydown", true, true, null, false, false, false, false, 40, 0);
evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 40, 0);
evt.initKeyEvent("keyup", true, true, null, false, false, false, false, 40, 40);

e.dispatchEvent(evt);

我做错了什么还是这不可能？

谢谢。

【问题讨论】：

确实很奇怪的原因。愿意解释一下，以便我们建议替代方案吗？ :)
好像可以设置selectedIndex，然后触发需要的事件。
如果您使用的是 chrome，请查看此内容（解释为什么无法完成）：stackoverflow.com/questions/1897333/…
它是一个firefox插件，需要改变selectbox选中的值。似乎有与选择框相关的事件在设置 selectedIndex 时不会触发。由于这是一个附加组件，源页面中的 javascript 是受保护的，我不能调用 onchange 或其他任何东西（它至少不起作用）。
@Wes 如果你这样做 fireMouseEvent("change", e); 不工作吗？顺便说一句，使用@ 通知人们您发布了新评论，否则他们不会看到它..

标签： javascript events drop-down-menu keypress

【解决方案1】：

这适用于大多数现代浏览器。它来自 Yahoo UI 库，并进行了一些编辑： http://developer.yahoo.com/yui/docs/UserAction.js.html

var customEvent;
var type = 'keydown';
var bubbles = true;
var cancelable = true;
var view = window;
var ctrlKey = false;
var altKey = false;
var shiftKey = false;
var metaKey = false;
var keyCode = 40;
var charCode = 40;

try {

    //try to create key event
    customEvent = document.createEvent("KeyEvents");

    /*
     * Interesting problem: Firefox implemented a non-standard
     * version of initKeyEvent() based on DOM Level 2 specs.
     * Key event was removed from DOM Level 2 and re-introduced
     * in DOM Level 3 with a different interface. Firefox is the
     * only browser with any implementation of Key Events, so for
     * now, assume it's Firefox if the above line doesn't error.
     */
    //TODO: Decipher between Firefox's implementation and a correct one.
    customEvent.initKeyEvent(type, bubbles, cancelable, view, ctrlKey,
        altKey, shiftKey, metaKey, keyCode, charCode);       

} catch (ex /*:Error*/){

    /*
     * If it got here, that means key events aren't officially supported. 
     * Safari/WebKit is a real problem now. WebKit 522 won't let you
     * set keyCode, charCode, or other properties if you use a
     * UIEvent, so we first must try to create a generic event. The
     * fun part is that this will throw an error on Safari 2.x. The
     * end result is that we need another try...catch statement just to
     * deal with this mess.
     */
    try {

        //try to create generic event - will fail in Safari 2.x
        customEvent = document.createEvent("Events");

    } catch (uierror /*:Error*/){

        //the above failed, so create a UIEvent for Safari 2.x
        customEvent = document.createEvent("UIEvents");

    } finally {

        customEvent.initEvent(type, bubbles, cancelable);

        //initialize
        customEvent.view = view;
        customEvent.altKey = altKey;
        customEvent.ctrlKey = ctrlKey;
        customEvent.shiftKey = shiftKey;
        customEvent.metaKey = metaKey;
        customEvent.keyCode = keyCode;
        customEvent.charCode = charCode;

    }          

}

//fire the event
document.dispatchEvent(customEvent);

【讨论】：