Equivalent of selectionStart, selectionEnd, and focus() for contenteditable spans and divs

Question

I am trying to set a contenteditable span so that it will on the onkeyup event refill the span with formatted text.

However, when I try this the cursor disappears and I can't type anymore. This is because the formatting program, instead of modifying the text already in the span, erases it all and then writes the formatted text in its place.

It is important (I think it is) to note that the element does not appear to be losing focus. Also, because I would like for this project to remain fairly "secret" until it's release, I would rather not give away the source code right now.

How can i place the caret/cursor/insertion point in a conenteditable span using javascript in much the same way that you could do it with a textarea — chrismamo1, Nov 06 '11 at 18:17
Here's my answer to a similar question: http://stackoverflow.com/questions/6240139/highlight-text-range-using-javascript/6242538#6242538 — Tim Down, Nov 07 '11 at 10:47

score 1 · Answer 1 · edited Oct 03 '13 at 01:19

1

This is probably due to you using the innerHTML to set the formatted text.

Instead use childNodes collection to access the content and replace textNodes with formatted html element. This avoids setting innerHTML and avoids loosing focus.

edited Oct 03 '13 at 01:19

Jeemusu

10,415
3
42
64

answered Oct 03 '13 at 01:01

user2840784

81
2

How does one proceed to use `childNodes`? – fiatjaf Aug 18 '16 at 02:31

Equivalent of selectionStart, selectionEnd, and focus() for contenteditable spans and divs

1 Answers1