Geek Answers Handbook

Content Continuation

A small introduction to what happens before the question:

When you enter text in contenteditable that contains html tags, it continues to paste into the tag if you are to the right of the tag. For example, if I have a text like this:

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

and it looks like this

fast | the fox jumped over the lazy dog.

My cursor is in the pipe position, right after the word quickly. If I go brown I get

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

quick brown | the fox jumped over the lazy dog.

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

My question is: how to remove this tag continuation function for other tags like span? I would like to save it for the <b> , but I do not want this to happen for the <span> .

+7
javascript html html5 contenteditable
source share
2 answers

Chrome and other WebKit browsers will always place the caret at the end of the <b> element, and not at the beginning of the next node text. For example, this WebKit error . Also this one . Firefox gives you more control.

None of the workaround options are good. See Related WebKit Errors for some suggestions.

+2
source share

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

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

FROM

  • You probably want the content in the <b> not to be edited. If not, it’s very difficult to say what people want when it starts typing next to the last character in this tag.
  • It is easy to fulfill your second requirement:
    I would like to save it for the b tag, but I do not want this to happen for the span tag.

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

+1
source share

More articles:


All Articles