JSFiddle - React, Tailwind, and code Playground

by James Allardice

HTML

<input id="example">

<div id="output"></div>

JavaScript

function handler(e) {
    $("#output").append(e.type + ": " + e.keyCode + ", " + e.target.keydownFired + ", " + e.target + "<br>");
    if (e.keyCode === 8) {
        alert("Backspace!");
    }
}
    
/*$("#example").on("input", function (e) {
    if (!this.keydownFired) {
        e.keyCode = 8;
    }
    delete this.keydownFired;
    handler.call(this, e);
}).on("keydown", function (e) {
    this.keydownFired = true;
    handler.call(this, e);
});*/


var elem = document.getElementById("example");
elem.addEventListener("keydown", function (e) {
    this.keydownFired = true;
    handler.call(this, e);
}, false);
elem.addEventListener("input", function (e) {
    if (!this.keydownFired) {
        e.keyCode = 8;
    }
    delete this.keydownFired;
    handler.call(this, e);
}, false);