JSFiddle - React, Tailwind, and code Playground

by bjoerne

HTML

<p>
    <input type="text" id="text-input" />
</p>
<div id="content-editable" contenteditable="true"></div>
<div id="log"></div>

CSS

body {
    font-family: "Helvetica","Arial","FreeSans","Verdana","Tahoma","Lucida Sans","Lucida Sans Unicode","Luxi Sans",sans-serif;
}

#log p {
    font-family: "Courier New", monospace;
    margin: 0;
    padding: 0;
}
#log p span {
    color: grey;
}
#content-editable {
    width: 200px;
    height: 100px;
    border: 1px dotted grey;
}

JavaScript

var ids = ['text-input', 'content-editable'];
var eventNames = ['keypress', 'beforeinput', 'textinput', 'beforeInput', 'textInput', 'input'];

lastLog = null;
timeStringLength = 6;
function log(msg) {
    var now = new Date().getTime();
    var time = lastLog ? now - lastLog : 0;
    lastLog = now;
    var timeAsString = "" + time;
    var spacesToAdd = timeStringLength - timeAsString.length;
    for (var i=0; i < spacesToAdd; i++) {
        timeAsString = "&nbsp;" + timeAsString;
    }
    $('#log').prepend('<p><span>' + timeAsString + '</span> ' + msg + '</p>');
}

$(function() {
    for (var i=0; i<ids.length; i++) {
        for (var j=0; j<eventNames.length; j++) {
            var id = ids[i];
            var eventName = eventNames[j];
            (function(id, eventName) {
                $('#' + id).on(eventName, function() {
                    log(id + '.' + eventName);
                });
            })(id, eventName);
        }
    }
});