Is it possible to trigger a key event on the DOM Window with Javascript/JQuery

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.

Jasper · Accepted Answer · 2011-12-15T20:32:45.520

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.

Hmm, you are right it does appear to be working with standard JS but unfortunately I am trying to run the JS in an extension (Chrome, Safari and FF) and for some reason the Key Events are being blocked. I have them running in the "content" scripts. I guess there is something in the extension API that blocks them. — thiesdiggity, Dec 15 '11 at 23:13

score 1 · Answer 2 · answered Jul 11 '17 at 06:34

Try this:

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

syntax:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
                    ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
                    keyCodeArg, charCodeArg)

Use "initKeyEvent" instead of "initKeyboardEvent".

score 0 · Answer 3 · answered Jun 19 '16 at 12:16

0

//::jQuery::
//press "L" or "l" to open Bootstrap Login Modal Form
$(document).keypress(function(evt){
  if (evt.charCode === 108 || evt.charCode == 76) {
    $('#login-modal')
      .modal('bs.modal.shown');
  }
});

Good Luck.

answered Jun 19 '16 at 12:16

Aakash

21,375
7
100
81

Is it possible to trigger a key event on the DOM Window with Javascript/JQuery

3 Answers3