Firing down arrow key press in a select box via javascript

Question

For strange reasons I have to change the selected element in a dropdownbox not via e.selectedIndex, but via the simulation of mouse and keypress events.

I tried the following:

//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);

Am I doing anything wrong or is this impossible?

Thank you.

Strange reasons indeed. Care to explain so that maybe we suggest alternative? :) — Shadow The GPT Wizard, Feb 07 '11 at 15:25
Seems like you could set the selectedIndex, then also trigger the events that are needed. — Josiah Ruddell, Feb 07 '11 at 15:41
See this if you are using chrome (explains why it can't be done): http://stackoverflow.com/questions/1897333/firing-a-keyboard-event-on-chrome — josh.trow, Feb 07 '11 at 15:44
It's a firefox plugin that needs to change the selectbox selected value. There seem to be events associated with the selectbox that don't fire when just setting selectedIndex. Since this is for an add-on, the javascript from the source page is protected and I can't call onchange or whatever (it doesn't work at least). — , Feb 07 '11 at 15:51
@Wes and if you do `fireMouseEvent("change", e);` doesn't it work? By the way use `@` to notify people that you posted new comment otherwise they're not going to see it.. — Shadow The GPT Wizard, Feb 08 '11 at 04:46
@Shadow Wizard - It does! How in the?.. This uses initMouseEvent - Will have to investigate. Thanks so much. — , Feb 08 '11 at 11:57

score 2 · Accepted Answer · answered Mar 23 '11 at 15:46

This works for me on most modern browsers. It's from the Yahoo UI Library with a couple of edits: 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);

Firing down arrow key press in a select box via javascript

1 Answers1

Linked