Keydown Simulation in Chrome fires normally but not the correct key

问题:

I want to simulate keydown events on a given textarea element in an html page. Since I am using chrome, I called initKeyboardEvent on my variable and I passed the keyCode I want to type into the textarea. Here is what I tried:

var keyEvent = document.createEvent('KeyboardEvent'); keyEvent.initKeyboardEvent('keydown', true, false, null, 0, false, 0, false, 77, 0); inputNode.dispatchEvent(keyEvent);

In this code I'm typing the letter m however the textarea is only getting the keyCode 13 which is the Enter key. So, I tried an override code I saw online that sets the value to keyCodeVal, but with no success

var keyEvent = document.createEvent('KeyboardEvent'); Object.defineProperty(keyEvent, 'keyCode', {                           get : function() {                                  return this.keyCodeVal;                          }                         }); keyEvent.initKeyboardEvent('keydown', true, false, null, 0, false, 0, false, 77, 0); keyEvent.keyCodeVal = 77; inputNode.dispatchEvent(keyEvent);

Does anyone have an idea how to set the keyCode value?

回答1:

So very very close...

You just needed to override the 'which' property. Here's some sample code:

Podium = {}; Podium.keydown = function(k) {     var oEvent = document.createEvent('KeyboardEvent');      // Chromium Hack     Object.defineProperty(oEvent, 'keyCode', {                 get : function() {                     return this.keyCodeVal;                 }     });          Object.defineProperty(oEvent, 'which', {                 get : function() {                     return this.keyCodeVal;                 }     });           if (oEvent.initKeyboardEvent) {         oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);     } else {         oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);     }      oEvent.keyCodeVal = k;      if (oEvent.keyCode !== k) {         alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");     }      document.dispatchEvent(oEvent); }

Sample usage:

Podium.keydown(65);

Note: this code is not designed to work in IE, Safari, or other browsers. Well, maybe with Firefox. YMMV.

回答2:

Orwellophile's solution does work.

• First: 'keyCode', 'charCode' and 'which' is readonly in Safari and IE9+ (at least).
• Second: initKeyboardEvent is kind of messy. All browsers implement it in a different way. Even in webkit's there are several different implementation of initKeyboardEvent. And there is no "good" way to initKeyboardEvent in Opera.
• Third: initKeyboardEvent is deprecated. You need to use initKeyEvent or KeyboardEvent constructor.

Here I wrote a cross-browser initKeyboardEvent function (gist):

Example:

var a = window.crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: