Non editable span are not working properly in contenteditable. This page presents some solutions.
Some browsers add a <BR>
in empty paragraph. On the following example, iframeyou press enter
between the hand and the non editable content, an extra line is added :
A solution is to delete the <br>
tag, but it creates some other pooblems.
In fact, the problem comes from this tag <span contenteditable='false'>
which is
not considered as a visible character.
Another option is to wrap non editable <span>
inside editable <span>
. But if the span
is empty, the behavior is the same. So, one option is to add invisble characters
(
) inside:
It works, but the invisible characters can be deleted.
Another solution is to catch events from keyboard. It's a more complicated JavaScript solution.
Unfortunalty, if you play with the above JSfiddle, you'll see it's far from perfect.
If you have a better solution, please contact me ...