JSFiddle - React, Tailwind, and code Playground

HTML

Pressed Key <input type="text" id="pk" /> <br/>
Executed keyDown Handler: <input type="text" id="keyDown" /> &nbsp; times <br />
Executed keyPressed Handler: <input type="text" id="keyPress" />&nbsp;times <br />
Executed keyUp Handler: <input type="text" id="keyUp" />times <br />

CSS

input { width: 50px; }

JavaScript

$(function () {
    var $kp = $('#keyPress');
    var $kd = $('#keyDown');
    var $ku = $('#keyUp');
    var $pk = $('#pk');
    var kp = 1;
    var kd = 1;
    var ku = 1;
    
    $(document).on ('keypress', function (e) {
        $kp.val(kp++);
        $pk.val(String.fromCharCode(e.which));
    }).on('keydown', function (e) {
        $kd.val(kd++);
    }).on('keyup', function (e) {
        $ku.val(ku);
        kp = 1;
        kd = 1;
        ku = 1;
    });
    
    
    
});