7

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
Drahcir
  • 951
  • 1
  • 8
  • 15
  • An example on something like jsbin.com would help. – m59 Dec 26 '13 at 23:48
  • Added example as suggested – Drahcir Dec 26 '13 at 23:58
  • It's curious, I don't have this problem on Firefox 28... When I put my cursor next to `quick` and write something, it's not in the `` tag... – Maxime Lorant Dec 27 '13 at 00:01
  • It happens 100% of the time on Chrome. But I just tested it on Firefox 26 as well. If you move the cursor using the arrow keys it will take the tag of the previous position it was in. So if you moved from right to left, it will be unbolded. If you moved from left to right, it will be bolded. If you click directly at the position, it will also be bolded. – Drahcir Dec 27 '13 at 00:11
  • I am sorry but I can't see any tag continuation issues in your jsfiddle link either, what are your settings, browser version? – Ali Gajani Dec 27 '13 at 00:44
  • I'm on Chrome 32.0.1700.41 When I click on the div in the "result" box and add brown after quick, it is bolded. – Drahcir Dec 27 '13 at 00:58
  • 1
    I think the logic here will do it, but it's a mess trying to move the caret in a contenteditable element. http://jsfiddle.net/PeuuC/2/ – m59 Dec 27 '13 at 01:28

2 Answers2

2

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.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
1

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

Community
  • 1
  • 1
lastr2d2
  • 3,604
  • 2
  • 22
  • 37