JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

Some input: <input type="text"><br>
Another input: <input type="text"><br>

<div id="log"></div>

<div id="lightbox"></div>

CSS

#lightbox {
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    background-color: #333;
    opacity: 0.5;
    z-index: 100;
}
#log {
    margin-top: 40px;
    height: 400px;
    overflow: auto;
}

JavaScript

function log(x) {
    var log$ = $("#log");
    log$.append(x + "<br>");
    log$.scrollTop(Math.max(0, log$[0].scrollHeight - 400));
}

$("input").on("keyup keydown keypress", function(e) {
    log("input key event: " + e.type);
});
    

$(document.body).on("keyup keydown keypress mousedown mouseup", function(e) {
    log("document event: " + e.type);
    if (e.type.indexOf("key") !== -1) {
        e.preventDefault();
        e.stopPropogation();
    }
});


// establish initial focus
$("#lightbox").focus();