JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<form>
    <div>
        Type Here: 
        <input type="text" id="inp" />
    </div>
    <div id="divKeyPress">
        <fieldset>
            <legend>Keypress</legend>
            <div>
                e.keyCode: 
                <label id="keypressKeyCode"></label>
            </div>
            <div>
                e.which: 
                <label id="keypressWhich"></label>
            </div>
            <div>
                e.charCode: 
                <label id="keypressCharCode"></label>
            </div>
        </fieldset>
    </div>
    <div id="divKeyDown">
        <fieldset>
            <legend>Keydown</legend>
            <div>
                e.keyCode: 
                <label id="keydownKeyCode"></label>
            </div>
            <div>
                e.which: 
                <label id="keydownWhich"></label>
            </div>
            <div>
                e.charCode: 
                <label id="keydownCharCode"></label>
            </div>
        </fieldset>
    </div>
    <div id="divKeyUp">
        <fieldset>
            <legend>Keyup</legend>
            <div>
                e.keyCode: 
                <label id="keyupKeyCode"></label>
            </div>
            <div>
                e.which: 
                <label id="keyupWhich"></label>
            </div>
            <div>
                e.charCode: 
                <label id="keyupCharCode"></label>
            </div>
        </fieldset>
    </div>
    <div id="divMouseClick">
        <fieldset>
            <legend>Mouse Click</legend>
            <div>
                e.which: 
                <label class="mouseclick" id="mouseclickWhich"></label>
            </div>
        </fieldset>
    </div>
</form>

CSS

div { margin-top: 10px; }
.notavail { color: red; }

JavaScript

$(document).ready(function() {
    // Prevent context menu from displaying
    $('form').on('contextmenu', function(e) { return false; });
    
    $('#inp').on('keypress', function(e) {
        // Write the key code
        $('#keypressKeyCode').html(e.keyCode);
        $('#keypressWhich').html(e.which);
        $('#keypressCharCode').html(e.charCode);
    }).on('keydown', function(e) {
        // Clear input and label values immediately on 'keydown'
        // so they will update correctly when a new key is pressed
        $(this).val('');
        $('label:not(.mouseclick)').html('');
        // Set input text for all keys that will not automatically fill
        // Print screen is handled in 'keyup'
        if (e.keyCode == 27) { $(this).val('Esc'); }
        else if (e.keyCode == 112) { e.preventDefault(); $(this).val('F1'); }
        else if (e.keyCode == 113) { $(this).val('F2'); }
        else if (e.keyCode == 114) { e.preventDefault(); $(this).val('F3'); }
        else if (e.keyCode == 115) { $(this).val('F4'); }
        else if (e.keyCode == 116) { e.preventDefault(); $(this).val('F5'); }
        else if (e.keyCode == 117) { e.preventDefault(); $(this).val('F6'); }
        else if (e.keyCode == 118) { $(this).val('F7'); }
        else if (e.keyCode == 119) { $(this).val('F8'); }
        else if (e.keyCode == 120) { $(this).val('F9'); }
        else if (e.keyCode == 121) { e.preventDefault(); $(this).val('F10'); }
        else if (e.keyCode == 122) { e.preventDefault(); $(this).val('F11'); }
        else if (e.keyCode == 123) { e.preventDefault(); $(this).val('F12'); }
        else if (e.keyCode == 145) { e.preventDefault(); $(this).val('Scroll Lock'); }
        else if (e.keyCode == 19) { e.preventDefault(); $(this).val('Pause Break'); }
        else if (e.keyCode == 45) { e.preventDefault(); $(this).val('Insert'); }
        else if (e.keyCode == 36) { e.preventDefault(); $(this).val('Home'); }
        else if (e.keyCode == 33) { e.preventDefault();...