JSFiddle - React, Tailwind, and code Playground

by NickU

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) {
        
        console.log(String.fromCodePoint(e.which));
        $('#keyPress').val($('#pk').val());
    }).on('keydown', function (e) {
        $('#keyDown').val($('#pk').val());
    }).on('keyup', function (e) {
        $('#keyUp').val($('#pk').val());
    });
    
    
    
});