JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<input type="text" placeholder="Type something..." />

CSS

body{text-align:center}
input{
  border:1px solid #0C6;
  padding:5px 10px;
  border-radius:3px
}

JavaScript

var a=[];
function keyName(p){
	var cases = {16:'Shift',17:'CTRL',18:'Alt'};
	return cases[p] ? cases[p] : 'KeyCode: '+p;
}
function keyPosition(p){
	var cases = {1:'Left',2:'Right'};
	return cases[p] ? cases[p]+' ' : '';
}
$('input').on('keydown',function(e){
	a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('input').on('keyup',function(){
	var c='';
  var removeDuplicates = [];
  $.each(a, function(i, el){
		if ($.inArray(el, removeDuplicates) === -1){
        removeDuplicates.push(el);
				c=c+(el)+' + ';
    }
  });
	a=[];
	alert(c.slice(0, -3))
});