Cross-browser initKeyboardEvent

crossBrowser_initKeyboardEvent.js

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

index.html

<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>

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

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

->

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

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.

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.

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?

How can we use this in Es6 or React?