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-15 20:32:45Z

6

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.

edited Dec 15, 2011 at 20:32

answered Dec 15, 2011 at 20:27

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thiesdiggity Over a year ago

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.

Subramanian · Accepted Answer · 2017-07-11 06:34:02Z

1

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".

answered Jul 11, 2017 at 6:34

Subramanian

415 bronze badges

Comments

Aakash · Accepted Answer · 2016-06-19 12:16:10Z

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, 2016 at 12:16

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related