JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  </head>
  <body>
    <input placeholder="scan here"/>
    <button>🗑</button>
    <textarea placeholder="Events will be shown here"></textarea>
  </body>
</html>

CSS

input{
  width: 90%;
  min-height: 30.5px;
  padding: 0px;
  margin: 0px;
  border: solid black 2px;
  float: left;
}
button{
  width: 9%;
  min-height: 30px;
  padding: 0px;
  margin: 0px;
  border: solid black 2px;
  float: left;
  font-weight: bold;
  font-size: 22.6px;
}
textarea{
  width: 99%;
  min-height: 500px;
  border: solid black 2px;
  float: left;
  overflow: auto;
}

JavaScript

// SoftReadOnly hardware keyboard support --------------------------
$(document.body).bind('keypress',function(evt){ // get global key input and write to sro field

  var $el      = $('input:focus');
  if(!$el[0]) return;
  
  //console.log(evt);
  
  var char     = evt.key;
	var input;
  
  switch(evt.keyCode){
    case 13:    break; // Enter
    default: {
      input = evt.key || String.fromCharCode(evt.keyCode); // Support both key and keycode in case one isn't available
    }
  }
  
  showInput(
  	"KEYPRESS - "+
    "keyCode: "+evt.keyCode+", "+
    "charCode:"+ evt.charCode +", "+
    "key:"+ evt.key +", "+
    "result:" +evt.key || String.fromCharCode(evt.keyCode)
  );
});
      
$(document.body).bind('keydown',function(evt){ // apply global backspace & delete to sro field

  var $el      = $('input:focus');
  if(!$el[0]) return;
  
  //console.log(evt);
  
  switch(evt.keyCode){
    case 8: { // Backspace
      showInput("KEYDOWN - backspace");
      break;
    }
    case 46: { // Delete
      showInput("KEYDOWN - delete");
      break;
    }
    case 37: { // Left
      showInput("KEYDOWN - left");
      break;
    }
    case 39: { // Right
      showInput("KEYDOWN - right");
      break;
    }
    case 35: { // End
      showInput("KEYDOWN - end");
      break;
    }
    case 36: { // Pos1
      showInput("KEYDOWN - pos1");
      break;
    }
  }
});

$(document.body).bind('paste',function(evt){
  var $el      = $('input:focus');
  if(!$el[0]) return;
  
  //console.log(evt);
  
  var input = evt.originalEvent.clipboardData.getData('Text');
  showInput("PASTE - "+input);
});

$("button").bind('click', function(){
	$("textarea").val("");
})
      
function showInput(input){
	$('textarea').val( $('textarea').val() + input + ' - '+ new Date().toTimeString().split("GMT")[0] +'\n\n');
}