3

Mainly in Firefox, although it occasionally breaks in other browsers as well. If you check the jsfiddle below, especially if you go to the last tag and try to delete them all, you can't. Sometimes you can. It's not consistent.

 <div id="testDiv" contentEditable="true">
      Hey <input id="user-tag-1" class="ut ut-full-name" carpos="9" type="button" tabindex="-1" value="Rob"/>
 </div>

I've seen this discussed on Mozilla's board as well as here, the workaround is generally to wrap the non contenteditable html in contenteditable <span>, <p>, <span>. Nothing I have seen actually fixes the problem for me. at least not completely. Even when I can delete the html, there's a lot of strange behavior.

Anyone know why this happens for contenteditable divs, and if it's just something that happens with non contenteditable html, is there a solution that would fix these issues, or do I have to write logic for the backspace and delete keys to check and delete the tags?

http://jsfiddle.net/mstefanko/qDkYq/

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
mstef
  • 1,164
  • 1
  • 13
  • 36
  • Note that the `` tag does not use and does not need a closing slash and never has in HTML. – Rob Jan 20 '20 at 21:46
  • Does this answer your question? [contenteditable div backspace and deleting text node problems](https://stackoverflow.com/questions/17890568/contenteditable-div-backspace-and-deleting-text-node-problems) – Rob Jan 21 '20 at 00:04

1 Answers1

1

I answered this in detail here: https://stackoverflow.com/a/18069930/352335

As a summary, the way each browser handles contenteditable divs varies a lot. Digging through google plus's implementation of their posting widget is what gave me the inspiration I needed to fix this.

If you're going to render non-editable html elements inside a contenteditable:

For Chrome, use a <button> tag. And use the chrome only attribute contenteditable="plaintext-only" on the editable div. If you're appending html make sure to add a space with each element.

For firefox, use an <input> tag, and append a <br> element to the editable div. The <br> at the end of the div allows you to focus after elements, and fixed the issues I was having with deleting.

vsync
  • 118,978
  • 58
  • 307
  • 400
mstef
  • 1,164
  • 1
  • 13
  • 36