Contenteditable tag continuation

Question

Small intro to what's happening before the question:

When typing text in a contenteditable that contains html tags, it continues inserting within the tag if you are to the right of the tag. For instance, if I have text like this:

The <b>quick</b> fox jumped over the lazy dog.

and it renders like this

The quick| fox jumped over the lazy dog.

My cursor is located at the pipe position, directly after the word quick. If I enter in brown I will get

The <b>quick brown</b> fox jumped over the lazy dog. 

The quick brown| fox jumped over the lazy dog.

example: http://jsfiddle.net/mBzvs/

My question is, how do I remove this tag-continuation feature for other tags such as span? I'd like to keep it for the <b> tag but I don't want this to happen for the <span> tag.

Answer 1

Chrome and other WebKit browsers will always place the caret at the end of the <b> element rather than the start of the next text node. See this WebKit bug, for example. Also this one. Firefox gives you more control.

None of the workaround options are good. See the linked WebKit bugs for some suggestions.

Answer 2

Until some found a better solution I would suggest you set contenteditable="false" to <b> tag.

The <b contenteditable="false">quick</b> fox jumped over the lazy dog

Since:

1. You probably want the content in <b> tag not editable. If not, it's very hard to tell what people wants when he starts typing next to the last character in that tag.
2. It's easy to fulfill your second requirement:
   I'd like to keep it for the b tag but I don't want this to happen for the span tag.

Note: You need additional code for IE. See contenteditable=false inside contenteditable=true block is still editable in IE8