JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<div tabindex="0" class="ct-input-manager" style="line-height: 20.287109375px; left: 40.38427734375px;" id="ce">T<span><a contenteditable="false"> </a></span></div>

<pre id="log"></pre>

CSS

*[contenteditable] {
  outline: 1px solid blue;
}

.ct-input-manager {
    position: absolute;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
    user-select: auto;
    white-space: pre-wrap;
}

.ct-input-manager:focus {
  outline: none;
}

JavaScript

const e = document.querySelector('#ce');
const l = document.querySelector('#log');

function log(txt) {
   l.appendChild(document.createTextNode(txt + '\n'));
}

function show(e) {
   log(e.inputType +':'+ e.type +' '+ e.data);
}

e.addEventListener('beforeinput', show);
e.addEventListener('input', show);