JSFiddle - React, Tailwind, and code Playground

by Roelof Berkepeis

HTML

<div id="ceDiv" contenteditable="true" tabindex="0" onkeydown="return fnKeyDiv(event);">put your cursor/caret in this contenteditable text and type some characters or use the arrow keys -- <span id="ceSpan" tabindex="0" onkeydown="return fnKeySpan(event);">see what happens when typing inside this yellow text</span> -- it's not clear to me : counter 2 only works when you click the mouse inside the yellow text to put the caret there, not when the caret is moved inside the yellow text by the arrow keys .. AND : counter 2 does never work in WebKit !? (in FireFox it does)</div>
<hr />
<span id="ST1" class="ST"></span> : counter 1 : typing in total text<br />
<span id="ST2" class="ST"></span> : counter 2 : typing in yellow "mytext"<br />

CSS

.ST { border: 1px solid #777; display: inline-block; height: 20px; width: 30px; }
#ceDiv { margin-bottom: 20px; }
#ceDiv #ceSpan { background-color: #FFFF00; }

JavaScript

var count = 0;
function fnKeyDiv(e) {
    count++;
    document.getElementById('ST1').innerHTML = count;
    return true;
}
function fnKeySpan(e) {
    count++;
    document.getElementById('ST2').innerHTML = count;
    return true;
}