CODEWITHSUNDEEP
javascripthtmlcsscontenteditable
Jonathan Andersson
Jonathan Andersson

Reputation: 1422

Contenteditable, delete removes char at carret + content generated with ::before in Chrome

I have a contenteditable element which may contain span inline elements. These inline elements may have content generated with pseudo selectors ::before or ::after and the CSS property content.

When a user then tries to remove(delete or backspace) a char placed before or after the inline element the whole inline is removed with it. If the inline element has text inside it works as it should (only the char is removed).

The problem exists in Chrome and Safari.

Anyone have suggestions for solutions that prevents this behaviour, Js and Jquery is at my disposal to solve this, and I do not want to alter the behaviour in firefox.

Fiddle

<p contenteditable="true">text
C<span class="pesudo" gentext="pseudo text"></span>
C<span class="default">just text</span>
more text.
</p>

Upvotes: 0

Views: 383

Answers (1)

Jonathan Andersson
Jonathan Andersson

Reputation: 1422

Well one hacky way to solve this is to insert a char in each inline element. I chose the char &#8203; which is a zero width space, so user will not see it.

Upvotes: 0

Related Questions