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.)
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) });
}
(evt.initKeyEvent || evt.initKeyboardEvent).call(evt, // etc.
event.keyCode
and event.which
always return 0. It's a known bug and the workaround is to use a regular event var event = document.createEvent('Event'); event.initEvent('keydown', true, true); event.keyCode = 76;
initKeyEvent
and initKeyboardEvent
are DEPRECATED.
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.
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...
.initKeyEvent
is now deprecated
I am not very good with this but KeyboardEvent
=> see KeyboardEvent is initialized with initKeyEvent
.
Here is an example for emitting event on <input type="text" />
element
document.getElementById("txbox").addEventListener("keypress", function(e) { alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode); }, false); document.getElementById("btn").addEventListener("click", function(e) { var doc = document.getElementById("txbox"); var kEvent = document.createEvent("KeyboardEvent"); kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74); doc.dispatchEvent(kEvent); }, false);
js:21TypeError: kEvent.initKeyEvent is not a function. (In 'kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74)', 'kEvent.initKeyEvent' is undefined)
in safari :(
Success story sharing