JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="edit" contentEditable="true">ContentEditable</div>
<input type="text" class="edit" placeholder="Input">
<pre id="output">event info here</pre>

CSS

.edit {
  font-size: 20pt;
  font-weight: 700;
}

JavaScript

var info = [];
var timeout = null;

$(".edit").on("textInput keyup keydown keypress input beforeinput", function(e) {
	info.push(`
Event: ${e.type}
Data: ${e.originalEvent.data}
Data code: ${(e.originalEvent.data && e.originalEvent.data.charCodeAt(0))}
Which: ${e.which}
Key: ${e.key}
`.trim());

	e.preventDefault();

	clearTimeout(timeout);
  timeout = setTimeout(function() {
		$("#output").text(info.join("\n--------------\n"));
    info = [];
  }, 100);
});