JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type='text' id="listen" />
    <br/>
    <br/>
    <textarea type='text' id="show"></textarea>
</div>

CSS

input {
    font-size: 22px
}
input, textarea {
    width:300px;
}
textarea {
    height:300px;
}

JavaScript

$(document).ready(function () {
    var inputEvent = 'oninput' in window ? 'input' : 'keyup';
    $('#listen').on(inputEvent, function (event) {
        $('#show').val($('#show').val() + '\n' + event.type);
        console.log('--- input event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |---> ' + event[v]);
            }
        }
    })
    //just added to see what Silk listens for on the keyup event
    $('#listen').on('keyup', function (event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
        console.log('--- keyup event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |-.-> ' + event[v]);
            }
        }
    })
});