JSFiddle - React, Tailwind, and code Playground

HTML

Key Down: <input type="text" id="keyDown" /> &nbsp; Char Code: <input type="text" id="kdc" /><br/>
Key Pressed: <input type="text" id="keyPress" />&nbsp; Char Code: <input type="text" id="kpc" /><br/>
Key Up: <input type="text" id="keyUp" /> &nbsp; Char Code: <input type="text" id="kuc" />

CSS

input { width: 50px; }

JavaScript

$(function () {
    var $kp = $('#keyPress');
    var $kd = $('#keyDown');
    var $ku = $('#keyUp');
    var $kpc = $('#kpc');
    var $kdc = $('#kdc');
    var $kuc = $('#kuc');

    var counter = 1;
    
    $(document).on ('keydown', function (e) {
        $kd.val(String.fromCharCode(e.which));
        $kdc.val(e.which);
    }).on ('keypress', function (e) {
        $kp.val(String.fromCharCode(e.which));
        $kpc.val(e.which);
    }).on('keyup', function (e) {
        $ku.val(String.fromCharCode(e.which));
        $kuc.val(e.which);
    });
    
    
    
});