I have multiple spans with content editable property set to true, like this:
<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>
https://jsfiddle.net/du7g39cz/
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 caret reaches last symbol.
I can reproduce this behavior on all browsers apart MS Edge.
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, intention is to let user edit only one word at a time.
Advertisement
Answer
It seems like a browser bug. It is only happening in Firefox for me, however, adding any amount of padding to the spans seems to correct the issue:
span[contentEditable] { padding: 1px; }