Is it possible to trigger a key event on the DOM Window with JavascriptJQuery - Stack Overflow

admin管理员组

文章数量:1297112

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.

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.

• javascript
• jquery
• events
• triggers
• keyevent

Share Improve this question Follow edited May 23, 2017 at 12:32 CommunityBot 111 silver badge asked Dec 15, 2011 at 20:19 thiesdiggitythiesdiggity 1,96722 gold badges2020 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/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/A7cEE/1/

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

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

//::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.

本文标签： Is it possible to trigger a key event on the DOM Window with JavascriptJQueryStack Overflow