JSFiddle - React, Tailwind, and code Playground

by jaf0

HTML

onkeypress: <input class="pd" style="font-size:24px;" placeholder="preventDefault" type="text" onkeypress="foo(event)"/><br>
onkeydown: <input class="pd" style="font-size:24px;" placeholder="preventDefault" type="text" onkeydown="foo(event)"/><hr>
onkeypress: <input class="rf" style="font-size:24px;" placeholder="return false" type="text" onkeypress="foo(event)"/><br>
onkeydown: <input class="rf" style="font-size:24px;" placeholder="return false" type="text" onkeydown="foo(event)"/><hr>
Results: <span id="r"></span><hr><div id="kc"></div>

CSS

.x {color:red}
.b {color:blue}

JavaScript

function sfcc(n) {
    return String.fromCharCode(n);
}
var foo = function(event) {
    var e = event.keyIdentifier.split('+')[1];
    var he = '&#x' + e + ';';
    var i;
    $('#kc').html('');
    $('#kc').append('keycode: [<span class="b">' + sfcc(event.keyCode) + '</span>] ');
    $('#kc').append('which: [<span class="b">' + sfcc(event.which) + '</span>] ');
    $('#kc').append('&amp;#x' + e + ': [<span class="b">' + he + '</span>]<br>');
    for (i in event) {
        if (["string", "boolean", "number"].indexOf(typeof event[i]) > -1 && i.toUpperCase() != i) // omit other random stuff
        $('#kc').append('<span>' + i + '</span>: [<span class="x">' + event[i] + '</span>]<br>');
    }
    if ($(event.target).hasClass("pd")) {
        $('#r').html("event.preventDefault()");
        event.preventDefault();
        event.stopPropagation();
    }
    if ($(event.target).hasClass("rf")) {
        $('#r').html("return false");
        return false;
    }
};