JSFiddle - React, Tailwind, and code Playground

by nosir

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() {
/*
    $('#listen').on('input', function(event) {
            $('#show').val($('#show').val() + '\n' + event.type);
    });
*/
document.querySelector('#listen').addEventListener('compositionstart', function(event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> compositionstart');
    });
    document.querySelector('#listen').addEventListener('keydown', function(event) {
    	var charCode = event.which || event.keyCode;
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + charCode);
    });
});