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

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

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

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

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

[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