Firing a Keyboard Event in Safari using JavaScript

Question

I m trying to simulate a keyboard event in Safari using JavaScript   I have tried this   var event   document createEvent  KeyboardEvent    event initKeyboardEvent  keypress   true  true  null  false  false  false  false  115  0        and also this   var event   document createEvent  UIEvents    event initUIEvent  keypress   true  true  window  1   event keyCode   115    After trying both approaches  however  I have the same problem  after the code has been executed  the keyCode which properties of the event object are set to 0  not 115   Does anyone know how to reliably create and dispatch a keyboard event in Safari   I d prefer to achieve it in plain JavaScript if possible

User · Answer

I am working on DOM Keyboard Event Level 3 polyfill . In latest browsers or with this polyfill you can do something like this:

element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true});
element.dispatchEvent(e);

//If you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})

UPDATE:

Now my polyfill supports legacy properties "keyCode", "charCode" and "which"

var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});

Examples here

Additionally here is cross-browser initKeyboardEvent separately from my polyfill: (gist)

Polyfill demo

User · Answer

Did you dispatch the event correctly   function simulateKeyEvent character      var evt   document createEvent  KeyboardEvent       evt initKeyEvent    evt initKeyboardEvent   keypress   true  true  window                      0  0  0  0                      0  character charCodeAt 0      var canceled    body dispatchEvent evt     if canceled           A handler called preventDefault     alert  canceled        else          None of the handlers called preventDefault     alert  not canceled            If you use jQuery  you could do   function simulateKeyPress character      jQuery event trigger   type    keypress   which   character charCodeAt 0

User · Answer

The Mozilla Developer Network provides the following explanation    Create an event using event   document createEvent  KeyboardEvent   Init the keyevent   using   event initKeyEvent  type  bubbles  cancelable  viewArg          ctrlKeyArg  altKeyArg  shiftKeyArg  metaKeyArg              keyCodeArg  charCodeArg     Dispatch the event using yourElement dispatchEvent event    I don t see the last one in your code  maybe that s what you re missing  I hope this works in IE as well

User · Answer

I am not very good with this but KeyboardEvent    see KeyboardEvent  is initialized with initKeyEvent   Here is an example for emitting event on  lt input type  text    gt  element  x000D   x000D  document getElementById  txbox   addEventListener  keypress   function e    x000D    alert  Event     e type     emitted  nKey   Char Code      e keyCode           e charCode   x000D     false   x000D   x000D  document getElementById  btn   addEventListener  click   function e    x000D    var doc   document getElementById  txbox    x000D    var kEvent   document createEvent  KeyboardEvent    x000D    kEvent initKeyEvent  keypress   true  true  null  false  false  false  false  74  74   x000D    doc dispatchEvent kEvent   x000D     false   x000D   lt input id  txbox  type  text  value      gt  x000D   lt input id  btn  type  button  value  CLICK TO EMIT KEYPRESS ON TEXTBOX    gt  x000D   x000D   x000D

User · Answer

This is due to a bug in Webkit   You can work around the Webkit bug using createEvent  Event   rather than createEvent  KeyboardEvent    and then assigning the keyCode property  See this answer and this example

[javascript] Firing a Keyboard Event in Safari, using JavaScript

Examples related to javascript

Examples related to safari

Examples related to webkit

Examples related to dom-events

Examples related to keyboard-events