JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

Click here to avoid sending key events outside of our supposed DOM

JavaScript

var lastTimeStamp=0;
var evPair={};
    
var translateChar=function(event) {
    var pressedKeys=[];
    var char=String.fromCharCode(event.keyCode);
    if(event.altKey) {
       pressedKeys.push('ALT');
    }
    
    if(event.ctrlKey) {
       pressedKeys.push('CTRL');
    }
    
    if(event.shiftKey) {
       pressedKeys.push('SHIFT');
    }
    
    if(char && /[\x20-\x7E]/.test(char) ) {
       pressedKeys.push(char); 
    }
    return pressedKeys.join(" + ");        
 };

var keyEvent=function(event) {
       
  evPair[event.type]={type:event.type, keyCode:event.keyCode, char:translateChar(event)};
  
  if(event.timeStamp - lastTimeStamp > 20) {
    window.setTimeout(function() {
      if(evPair.keypress) {
        console.debug(evPair.keydown, evPair.keypress);
      } else {
        console.debug(evPair.keydown);
      }
      evPair={};
    },50);
  }
  lastTimeStamp=event.timeStamp;
};
        
window.addEventListener("keydown", function(downEvent){
    keyEvent(downEvent);
});

window.addEventListener("keypress", function(pressEvent){
    keyEvent(pressEvent);
});