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

Firing a Keyboard Event in Safari, using JavaScript


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


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) });}


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.