JSFiddle - React, Tailwind, and code Playground

by tadeck

HTML

<h2>The test ground:</h2>
<div>
    <p>Press couple keys, then leave the field</p>
    <input type="text" id="field" name="text" />
</div>
<h2>The console:</h2>
<div id="output"></div>

JavaScript

var log = function(msg){
    document.getElementById('output').innerHTML += '<p>' + msg + '</p>';
};

var field = jQuery('#field');

field.on('focus', function(event){
    // clear the list of keys
    document.getElementById('output').innerHTML = '';
    jQuery(this).data('pressed-keys', []);
});

field.on('keypress', function(event){
    var el = jQuery(this);
    var keys = el.data('pressed-keys') || [];
    keys.push([event.which, event.ctrlKey]);
    el.data('pressed-keys', keys);
});

field.on('change', function(event){
    var el = jQuery(this);
    jQuery.each(el.data('pressed-keys') || [], function(index, value){
        log(value);
    });
});