JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<input type="text" />
<br />
<div>
     <h2>onkeypress</h2>

    <p id="keypress" onkeypress="this.value=this.value + '\nonkeypress '"></p>
</div>
<div>
     <h2>onkeydown</h2>

    <p id="keydown" onkeydown="this.value=this.value + '\nonkeydown '"></p>
</div>
<div>
     <h2>onkeyup</h2>

    <p id="keyup" onkeyup="this.value=this.value + '\nonkeyup '"></p>
</div>

CSS

div {
    display: inline-block;
    width: 150px;
    margin: 8px;
    vertical-align: top;
}
h2 {
    margin: 4px;
    font-size: 14px;
}

JavaScript

$("input")
    .keydown(function (e) {
    _onKey(this, e, "keydown");
})
    .keyup(function (e) {
    _onKey(this, e, "keyup");
})
    .keypress(function (e) {
    _onKey(this, e, "keypress");
})

_onKey = function (elem, e, name) {
    $("#" + name).html(
    $("#" + name).html() + name +
        " " + $(elem).val() +
        ", " + e.which +
        "<br />");

    $(elem).val("");
};