Create a gist now

Instantly share code, notes, and snippets.

Embed
Cross-browser initKeyboardEvent
void function() {//closure
var global = this
, _initKeyboardEvent_type = (function( e ) {
try {
e.initKeyboardEvent(
"keyup" // in DOMString typeArg
, false // in boolean canBubbleArg
, false // in boolean cancelableArg
, global // in views::AbstractView viewArg
, "+" // [test]in DOMString keyIdentifierArg | webkit event.keyIdentifier | IE9 event.key
, 3 // [test]in unsigned long keyLocationArg | webkit event.keyIdentifier | IE9 event.location
, true // [test]in boolean ctrlKeyArg | webkit event.shiftKey | old webkit event.ctrlKey | IE9 event.modifiersList
, false // [test]shift | alt
, true // [test]shift | alt
, false // meta
, false // altGraphKey
);
/*
// Safari and IE9 throw Error here due keyCode, charCode and which is readonly
// Uncomment this code block if you need legacy properties
delete e.keyCode;
_Object_defineProperty(e, {writable: true, configurable: true, value: 9})
delete e.charCode;
_Object_defineProperty(e, {writable: true, configurable: true, value: 9})
delete e.which;
_Object_defineProperty(e, {writable: true, configurable: true, value: 9})
*/
return ((e["keyIdentifier"] || e["key"]) == "+" && (e["keyLocation"] || e["location"]) == 3) && (
e.ctrlKey ?
e.altKey ? // webkit
1
:
3
:
e.shiftKey ?
2 // webkit
:
4 // IE9
) || 9 // FireFox|w3c
;
}
catch ( __e__ ) { _initKeyboardEvent_type = 0 }
})( document.createEvent( "KeyboardEvent" ) )
, _keyboardEvent_properties_dictionary = {
"char": "",
"key": "",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"locale": "",
"detail": 0,
"bubbles": false,
"cancelable": false,
//legacy properties
"keyCode": 0,
"charCode": 0,
"which": 0
}
, own = Function.prototype.call.bind(Object.prototype.hasOwnProperty)
, _Object_defineProperty = Object.defineProperty || function(obj, prop, val) {
if( "value" in val ) {
obj[prop] = val["value"];
}
}
;
function crossBrowser_initKeyboardEvent(type, dict) {
var e;
if( _initKeyboardEvent_type ) {
e = document.createEvent( "KeyboardEvent" );
}
else {
e = document.createEvent( "Event" );
}
var _prop_name
, localDict = {};
for( _prop_name in _keyboardEvent_properties_dictionary ) if(own(_keyboardEvent_properties_dictionary, _prop_name) ) {
localDict[_prop_name] = (own(dict, _prop_name) && dict || _keyboardEvent_properties_dictionary)[_prop_name];
}
var _ctrlKey = localDict["ctrlKey"]
, _shiftKey = localDict["shiftKey"]
, _altKey = localDict["altKey"]
, _metaKey = localDict["metaKey"]
, _altGraphKey = localDict["altGraphKey"]
, _modifiersListArg = _initKeyboardEvent_type > 3 ? (
(_ctrlKey ? "Control" : "")
+ (_shiftKey ? " Shift" : "")
+ (_altKey ? " Alt" : "")
+ (_metaKey ? " Meta" : "")
+ (_altGraphKey ? " AltGraph" : "")
).trim() : null
, _key = localDict["key"] + ""
, _char = localDict["char"] + ""
, _location = localDict["location"]
, _keyCode = localDict["keyCode"] || (localDict["keyCode"] = _key && _key.charCodeAt( 0 ) || 0)
, _charCode = localDict["charCode"] || (localDict["charCode"] = _char && _char.charCodeAt( 0 ) || 0)
, _bubbles = localDict["bubbles"]
, _cancelable = localDict["cancelable"]
, _repeat = localDict["repeat"]
, _locale = localDict["locale"]
, _view = global
;
localDict["which"] || (localDict["which"] = localDict["keyCode"]);
if( "initKeyEvent" in e ) {//FF
//https://developer.mozilla.org/en/DOM/event.initKeyEvent
e.initKeyEvent( type, _bubbles, _cancelable, _view, _ctrlKey, _altKey, _shiftKey, _metaKey, _keyCode, _charCode );
}
else if( _initKeyboardEvent_type && "initKeyboardEvent" in e ) {//https://developer.mozilla.org/en/DOM/KeyboardEvent#initKeyboardEvent()
if( _initKeyboardEvent_type == 1 ) { // webkit
//http://stackoverflow.com/a/8490774/1437207
//https://bugs.webkit.org/show_bug.cgi?id=13368
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _ctrlKey, _shiftKey, _altKey, _metaKey, _altGraphKey );
}
else if( _initKeyboardEvent_type == 2 ) { // old webkit
//http://code.google.com/p/chromium/issues/detail?id=52408
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _ctrlKey, _altKey, _shiftKey, _metaKey, _keyCode, _charCode );
}
else if( _initKeyboardEvent_type == 3 ) { // webkit
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _ctrlKey, _altKey, _shiftKey, _metaKey, _altGraphKey );
}
else if( _initKeyboardEvent_type == 4 ) { // IE9
//http://msdn.microsoft.com/en-us/library/ie/ff975297(v=vs.85).aspx
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _modifiersListArg, _repeat, _locale );
}
else { // FireFox|w3c
//http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent-initKeyboardEvent
//https://developer.mozilla.org/en/DOM/KeyboardEvent#initKeyboardEvent()
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _char, _key, _location, _modifiersListArg, _repeat, _locale );
}
}
else {
e.initEvent(type, _bubbles, _cancelable)
}
for( _prop_name in _keyboardEvent_properties_dictionary )if( own( _keyboardEvent_properties_dictionary, _prop_name ) ) {
if( e[_prop_name] != localDict[_prop_name] ) {
try {
delete e[_prop_name];
_Object_defineProperty( e, _prop_name, { writable: true, "value": localDict[_prop_name] } );
}
catch(e) {
//Some properties is read-only
}
}
}
return e;
}
//export
global.crossBrowser_initKeyboardEvent = crossBrowser_initKeyboardEvent;
}.call(this);
<html>
<script src="crossBrowser_initKeyboardEvent.js"></script>
<script>
var a = window.crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
alert(a.type + " | " + a.key + " | " + a.char + " | " + a.shiftKey)
</script>
</html>
@pat841

This comment has been minimized.

Show comment
Hide comment
@pat841

pat841 Oct 10, 2014

What license is this under? Do I have permission to reuse/modify this snippet?

pat841 commented Oct 10, 2014

What license is this under? Do I have permission to reuse/modify this snippet?

@st333v

This comment has been minimized.

Show comment
Hide comment
@st333v

st333v Nov 21, 2014

This looks really cool, say you wanted to simulate someone pressing "Shift" and "Enter" at the same time, how would you do the crossBrowser_initKeyboardEvent for that

st333v commented Nov 21, 2014

This looks really cool, say you wanted to simulate someone pressing "Shift" and "Enter" at the same time, how would you do the crossBrowser_initKeyboardEvent for that

@monolithed

This comment has been minimized.

Show comment
Hide comment
@monolithed

monolithed Apr 10, 2015

event["keyLocation"] || event["location"]) == 3

->

event["KeyboardEvent"] || event["keyLocation"] || event["location"]) == 3
event["keyLocation"] || event["location"]) == 3

->

event["KeyboardEvent"] || event["keyLocation"] || event["location"]) == 3
@Z3TA

This comment has been minimized.

Show comment
Hide comment
@Z3TA

Z3TA Jul 1, 2016

Why did you use own() instead of obj.hasOwnProperty?

While it might have saved you one second typing it, it will take everyone that reads the code one minute to figure out what it does.
On estimating how many people that have read this code ... 3 second saved, 30 hours wasted and counting ...

The same could be said about clever use of (eval) || (eval)

I do think it's a form of art though.

Z3TA commented Jul 1, 2016

Why did you use own() instead of obj.hasOwnProperty?

While it might have saved you one second typing it, it will take everyone that reads the code one minute to figure out what it does.
On estimating how many people that have read this code ... 3 second saved, 30 hours wasted and counting ...

The same could be said about clever use of (eval) || (eval)

I do think it's a form of art though.

@richardschoen

This comment has been minimized.

Show comment
Hide comment
@richardschoen

richardschoen Mar 1, 2018

This might sound silly, but I'm setting a text field and want to simulate an arrow left movement in the field. I'm not quite sure how I would do that with this code.

My current code stuffs a value like this:
elem1.cells[2].children[0].value = "01/03/2018";
elem1.focus();
// Then I want to trigger an arrow left keystroke to trigger the OnKeyUp event which has some JavaScript logic already attached to it.
// If I stuff the value without touching a key the value doesn't register to the app.
// Q: once I include the above JavaScript how could I trigger the left arrow on elem1 ?

Thanks in advance. I'm somewhat new at JavaScript and this app doesn't have jQuery available or I would be done.

This might sound silly, but I'm setting a text field and want to simulate an arrow left movement in the field. I'm not quite sure how I would do that with this code.

My current code stuffs a value like this:
elem1.cells[2].children[0].value = "01/03/2018";
elem1.focus();
// Then I want to trigger an arrow left keystroke to trigger the OnKeyUp event which has some JavaScript logic already attached to it.
// If I stuff the value without touching a key the value doesn't register to the app.
// Q: once I include the above JavaScript how could I trigger the left arrow on elem1 ?

Thanks in advance. I'm somewhat new at JavaScript and this app doesn't have jQuery available or I would be done.

@NJseo

This comment has been minimized.

Show comment
Hide comment
@NJseo

NJseo Mar 15, 2018

Hi, I tried, just for testing purposes, to write my name in the text field by simulating a key events with the code provided. I was not successful in getting the script to enter an alphabetic letter in the form field. Can this script do such a task?

NJseo commented Mar 15, 2018

Hi, I tried, just for testing purposes, to write my name in the text field by simulating a key events with the code provided. I was not successful in getting the script to enter an alphabetic letter in the form field. Can this script do such a task?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment