CODEWITHSUNDEEP
javascriptgoogle-chromedom-eventskeyboard-events
Kamt Schatka
Kamt Schatka

Reputation: 57

How to simulate keypress with Javascript in Chrome

I have found a lot of information on this topic, but none of them seem to work (anymore).

What I want to do is to simulate key(down/press/up) events in Chrome 59(I really don't care about other browser). Simulating the Event itself is not the problem, but the problem is that I have not found a solution that is backwards compatible and contains the charCode/keyCode values. If it were up to me, I would update the code of the other application to check for key/code, but unfortunately it is not up to me.

What I have tried so far:

var evt = new KeyboardEvent(type, {code: options.charCode, key: options.keyCode, keyCode: options.keyCode, charCode: options.keyCode, which: options.which});
element.dispatchEvent(evt);

According to https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent this should work and create an event with the keyCode/charCode/which set, but it does not work:

My code (I have tried with and without quotes and with characters instead of numbers):

new KeyboardEvent("keypress", {code: 123, key: 123, keyCode: 123, charCode: 123, which: 123});

Output:

KeyboardEvent {isTrusted: false, key: "123", code: "123", location: 0, ctrlKey: false…}
altKey:false
bubbles:false
cancelBubble:false
cancelable:false
charCode:0
code:"123"
composed:false
ctrlKey:false
currentTarget:null
defaultPrevented:false
detail:0
eventPhase:0
isComposing:false
isTrusted:false
key:"123"
keyCode:0
location:0
metaKey:false
path:Array(0)
repeat:false
returnValue:true
shiftKey:false
sourceCapabilities:null
srcElement:null
target:null
timeStamp:2469092.6000000006
type:"keypress"
view:null
which:0
__proto__:KeyboardEvent

I then had a look at the specification and noticed that the keyCode/charCode/which property are not there any more, which leads me to believe that it has been removed from the standard and it should not work like this any more: https://w3c.github.io/uievents/#keyboardevent

As this is clearly not working, I started to look into the deprecated function initKeyboardEvent and tried this:

var evt = document.createEvent("KeyboardEvent");
//Chrome hack
Object.defineProperty(evt, 'keyCode', {
    get : function(){
        return this.keyCodeVal;
    }
});
Object.defineProperty(evt, 'which', {
    get : function(){
        return this.keyCodeVal
    }
});
Object.defineProperty(evt, 'charCode', {
    get : function(){
        return this.charCodeVal
    }
});
//initKeyBoardEvent seems to have different parameters in chrome according to MDN KeyboardEvent(sorry, can't post more than 2 links), but that did not work either
evt.initKeyboardEvent("keypress",
    true,//bubbles
    true,//cancelable
    window,
    false,//ctrlKey,
    false,//altKey,
    false,//shiftKey,
    false,//metaKey,
    123,//keyCode,
    123//charCode
);
evt.charCodeVal = 123;
evt.keyCodeVal = 123;

So this already seemed promising, but when i dispatched the event, this is the event that I can see in the handler:

KeyboardEvent
altKey:false
bubbles:true
cancelBubble:false
cancelable:true
charCode:0
code:""
composed:false
ctrlKey:false
currentTarget:input#iceform:username.iceInpTxt.bookLoginTextbox
defaultPrevented:false
detail:0
eventPhase:2
isTrusted:false
key:""
keyCode:0
location:0
metaKey:true
path:Array[16]
repeat:false
returnValue:true
shiftKey:true
sourceCapabilities:null
srcElement:input#iceform:username.iceInpTxt.bookLoginTextbox
target:input#iceform:username.iceInpTxt.bookLoginTextbox
timeStamp:9932.905000000002
type:"keypress"
view:Window
which:0
__proto__:KeyboardEvent

This is when I finally gave up and decided to ask for help. Is there any way I can properly simulate those events in a way that it is also backwards compatible?

PLEASE DO NOT SUGGEST JQUERY OR SIMILIAR THINGS

Upvotes: 2

Views: 8617

Answers (1)

Kamt Schatka
Kamt Schatka

Reputation: 57

OK i finally figured out the problem. The code itself is actually OK(the one with the deprecated initKeyboardEvent).

The problem is, that i was executing this in a contentscript of a chrome extension. In this case all the properties of the event get reset to their default values and THEN the event is raised. I am now adding a script to the page that contains exactly the same code and it works just fine.

Upvotes: 1

Related Questions