Free collection of beautiful vector icons for your web pages.

Non editable span in contenteditable

Non editable span are not working properly in contenteditable. This page presents some solutions.

Carriage return and BR

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 :

Delete BR tag

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.

Wrap non editable span in editable span

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 (&#65279;) inside:

It works, but the invisible characters can be deleted.

Catching events

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 ...

See also

Last update : 03/30/2020