JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div contenteditable>
    BEFORE
    <span>SPAN</span>
    AFTER
</div>

<p>
    Click on the yellow SPAN element (to place the caret inside it), and then press a character key (to change the text-content of the SPAN element). The alert-box shows that the event-target is the DIV element, not the SPAN element...
</p>

CSS

div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }

JavaScript

$('div span').keydown(function(e) {
    alert( e.target.nodeName );
});