Multiple contentEditable, unable to move carret to end of span with arrow keys : <p>I have multiple spans with content editable property set to true, like this: </p>

<pre><code>&lt;span contentEditable='true'&gt; value&lt;/span&gt;&lt;span contentEditable='true'&gt; value&lt;/span&gt;&lt;span contentEditable='true'&gt; value&lt;/span&gt;
</code></pre>

<p><a href="https://jsfiddle.net/du7g39cz/" rel="noreferrer">https://jsfiddle.net/du7g39cz/</a></p>

<p>Problem is that when I am using arrow keys to navigate around span element, i can not reach end of individual span as blur event gets called when carret reaches last symbol. </p>

<p>I can reproduce this behavior on all browsers apart MS Edge. </p>

<p>I must note that I wouldn't like to keep only one content editable parent, as this would easily let user to delete whole paragraph, intenion is to let user edit only one word at a time. </p>
