JSFiddle - React, Tailwind, and code Playground

HTML

More complex example can be found here: <a href="http://h123.ru/-/tests/KeyboardEvent/"> http://h123.ru/-/tests/KeyboardEvent/ </a>
<br>
This demo uses polyfill from <a href="https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill">https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill</a>
<hr>
<h3>Enter some text with uppercase and lowercase letters:</h3>
<input />

<h3>Click button to create sintetic KeyboardEvent with predefined 'a' "key" and "char"</h3>
<button id=click><span>click to me to create a synthetic event</span></button>
<br>

<div id="output" style="background:green;min-height:40px">
</div>
    
    
<!--[if lt IE 8]>
<script src="//h123.ru/js/a.ielt8.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="//h123.ru/js/a.ie8.js"></script>
<![endif]-->
<script src="//h123.ru/js/a.js"></script>
    
<script src="//h123.ru/js/DOMEventsLevel3.shim.js?1"></script>

JavaScript

void function () {

var output = document.getElementById("output");
      
output.prepend("'KeyboardEvent' constructor status: " + (/\[native\s+code\]/i.test(KeyboardEvent + "") ? "NATIVE" : "POLYFILL"))

document.addEventListener("keydown", function(e) {
     output.insertAdjacentHTML("afterbegin", 
        "<b>char:&nbsp;</b>" + e.char + "&nbsp;|&nbsp;" +
        "<b>key:</b>&nbsp;" + e.key + "&nbsp;|&nbsp;" +
        "<b>shiftKey:</b>&nbsp;" + e.shiftKey + "&nbsp;|&nbsp;" +
        "<b>keyCode:</b>&nbsp;" + e.keyCode + "&nbsp;|&nbsp;" +
        "<b>location:</b>&nbsp;" + e.location + "<br/>") ;
      
      e.preventDefault();
});

var click = document.getElementById("click");
click.addEventListener("click", function() {
    /*
    KeyboardEvent constructor
    http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-KeyboardEvent-initializers
    https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill
    */
    var keyEvent = new KeyboardEvent("keydown", {key : "a", char : "a", shiftKey: false});
      var keyEvent2 = new KeyboardEvent("keyup", {key : "a", char : "a", shiftKey: false});
    document.dispatchEvent(keyEvent);
    document.dispatchEvent(keyEvent2);
});

}();