JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span> onKeyPress: </span><input type="text" id="a" name="a" />
</div>
<div>
    <span> onInput:</span><input type="text" id="b" name="b" />
</div>
<div>
    <span> onChange:</span><input type="text" id="c" name="c" />
</div>
<pre id="output"></pre>

CSS

body {
    padding: 10px;
}
span {
    display: inline-block;
    width: 100px;
}
div {
    margin: 10px;
}
#output {
    margin: 20px;
    border: 2px inset gray;
    height: 100px;
    overflow: scroll;
}

JavaScript

var output = document.getElementById("output");

var log = function(v) {
    output.innerHTML = v + "\n" + output.innerHTML;
};

document.getElementById("a").onkeypress = function(e) {
    e = e || window.event;
    var k = e.keyCode || e.which;
    this.value = String.fromCharCode(k);
    log(this.value);

    return false;
};

var handler = function() {
    this.value = this.value.substring(this.value.length-1);
    log(this.value);
};

document.getElementById("b").oninput = handler;
document.getElementById("c").onchange = handler;