JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<!DOCTYPE html>
<html>
<body>

<p id='press'>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>

<input id="text" type="text" size=40 onkeypress="myFunction(event)" onkeydown="downFunction(event)">

<script>

function myFunction(event) {
		var x = event.which || event.keyCode || event.charCode;
    if(x >= 65 && x <= 90 || x >= 97 && x <= 122 || x == 32){
    		var element  = document.getElementById('ul');
				var fragment = document.createDocumentFragment();
				var li = document.createElement('li');
				li.textContent = String.fromCharCode(x) + ': ' + x;
				fragment.appendChild(li);
				element.appendChild(fragment);
        };
};

function downFunction(event) {
		var y = event.which || event.keyCode || event.charCode;
    if( y == 8 ){
    		var element  = document.getElementById('ul');
    		element.removeChild(element.lastChild);
};
};

$('#text').click(function(e){
		$('#press').hide();
    });
    
$('#text').focusout(function(e){
		var element  = document.getElementById('ul');
      if (element.children.length == 0) {
        $('#press').show();
      };
    });

</script>

<table style="width:100%">
    <tbody>
    <tr id="ul"></tr>
    </tbody>
  </table>

</body>
</html>