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.