Question

is it possible to trigger a key event on the DOMWindow or DOMDocument in javascript? Basically I am creating an browser extension to interact with a website and they have shortcut Key Events (similar to GMail) on performing specific actions. I have found other postings on how to properly trigger key events (Definitive way to trigger keypress events with jQuery) but they don’t seem to work when sending the key events to the document/window.

So far I have tried:

var evt = document.createEvent("KeyboardEvent");
evt.initKeyboardEvent("keydown", true, true, window, false, false, false, false, 0, "o".charCodeAt(0))
window.document.dispatchEvent(evt);

and a jQuery implementation:

$(document).trigger({ type: 'keydown', which: "0".charCodeAt(0) });

I also tried doing “keydown”, “keypress” and “keyup” in succession but that did not work either.

Any help would be greatly appreciated!

Thanks in advance.

Answer 1

I know you can pass extra arguments when using trigger() but I’m not sure you can overwrite properties of the event object. You can pass data like this though:

$(document).on('keydown keyup keypress', function (event, characterCode) {
    if (typeof(characterCode) == 'undefined') {
        characterCode = -1;
    }
    console.log('type = ' + event.type);
    console.log('characterCode = ' + characterCode);
});

And this would be the trigger() code:

$(document).trigger('keydown', [ "0".charCodeAt(0) ]);

Here is a demo: http://jsfiddle.net/A7cEE/ (watch your console for the logs)

The code from the stackoverflow answer you provided seems to work fine:

To Capture:

$(document).on('keydown', function (event) {
    console.log('type = ' + event.type);
    console.log('keyCode = ' + event.keyCode);
});

To Trigger:

var e = jQuery.Event('keydown');
e.keyCode = "0".charCodeAt(0);
$(document).trigger(e);

Demo: http://jsfiddle.net/A7cEE/1/

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.