JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#interface-KeyboardEvent">
    DOM Level 3 Event: Keybaord Event</a>

</p>
<p><a href="http://www.w3.org/TR/DOM-Level-3-Events-code/">DOM Level 3 KeyboardEvent code Values</a>

</p>
<form id="form" action="#" method="get">
    <input type="text" />
</form>
<div></div>

CSS

body {
    font-family: monospace;
}
input {
    font-size: 200%
}

JavaScript

(function() {
  var timer;

  var divEl = document.querySelector('div');
  var inputEl = document.querySelector('input');

  var log = function log(text) {
    var pEl = document.createElement('p');
    pEl.textContent = text + ', text=' + inputEl.value;
    divEl.insertBefore(pEl, divEl.firstElementChild);
      
    if (typeof window.dump === 'function') {
        window.dump(pEl.textContent + '\n');
    }

    clearTimeout(timer);
    timer = setTimeout(function () {
      divEl.insertBefore(document.createElement('hr'), divEl.firstElementChild);
    }, 500);
  }

  var keyEventProps = 
    ['keyCode', 'charCode', 'key', 'code', 'location', 'eventPhase', 'repeat'];

  var logKeyEvent = function logKeyEvent(evt) {
    log((new Date()).getTime() +
        ' ' + evt.type + ': ' + 
        keyEventProps.map(function(prop) { 
          return prop + '=' + evt[prop]
        }).join(', '));
  };

  ['keypress', 'keydown', 'keyup']
    .forEach(function(evtType) {
      window.addEventListener(evtType, logKeyEvent);
    });

  ['compositionstart', 'compositionupdate', 'compositionend']
    .forEach(function(evtType) {
      window.addEventListener(evtType, function(evt) {
        log((new Date()).getTime() + ' ' + evt.type + ': data=' + evt.data);
      });
    });

  ['input', 'change', 'beforeinput']
    .forEach(function(evtType) {
      window.addEventListener(evtType, function(evt) {
        log((new Date()).getTime() + ' ' + evt.type);
      });
    });

  ['focus', 'blur', 'focusin', 'focusout']
    .forEach(function(evtType) {
      window.addEventListener(evtType, function(evt) {
         log((new Date()).getTime() + ' ' + evt.type + ': relatedTarget=' + evt.relatedTarget);
      });
    });

  var formEl = document.querySelector('form');

  ['submit', 'reset']
    .forEach(function(evtType) {
      formEl.addEventListener(evtType, function(evt) {
        log((new Date()).getTime() + ' ' + evt.type);
        evt.preventDefault();
      });
    });
})();