Javascript text range up to caret position

Question

I am using IE 8 and I would like to create a text range in a contenteditable div which should include all text until caret position (known to me in the editableDiv). So far I was able to select all text inside my the div:

 function myFunction(editableDiv, cursorPosition)
 {
    if (document.selection) {
       var range = document.body.createTextRange();
        range.moveToElementText(editableDiv);            
        range.collapse(false);
        range.select();
    }
 }

<div id="myDiv" runat="server" contenteditable="true">

But how can I create a text range that begins with the first character in the div and lasts up to caret position? Thank you very much.

Are there any nodes besides text nodes in your editableDiv? Spans, font weight tags etc? If not, you can use the endOffset property of the first range in your selection object. — Asad Saeeduddin, Oct 17 '12 at 09:13
cursorPosition is an integer number that keeps the track of the number of characters found before the caret (it does not thake into account html elements, but only innerText length before the caret inside the div). — Crista23, Oct 17 '12 at 09:30

score 1 · Accepted Answer · answered Oct 17 '12 at 09:31

1

Use the setEndPoint() method of TextRange:

var caretRange = document.selection.createRange();
var preCaretRange = document.body.createTextRange();
preCaretRange.moveToElementText(editableDiv);
preCaretRange.setEndPoint("EndToStart", caretRange);

Obviously you'll need different code for non-IE browsers.

answered Oct 17 '12 at 09:31

Tim Down

318,141
75
454
536

var caretRange = document.selection.createRange(); Is this supposed to create a text range beginning from the cursor position? Or how do I make use of the cursorPosition? Thanks! – Crista23 Oct 17 '12 at 10:03
I see your point, but my problem is that there is no cursor placed inside the editableDiv when I am calling the function, in fact I need it to place the caret after the span I add inside the editableDiv. My version always places the caret at the end, but I need something to place the caret just after the inserted span, and this can be anywhere. – Crista23 Oct 17 '12 at 15:12
@Crista23: If you want the range to end after the span, you can use a different combination of `moveToElementText()` and `setEndPoint()`. – Tim Down Oct 17 '12 at 23:36
Thank you for your answer! I did this and I get no errors, however it seems that my span is getting selected inside the content editable div and is focused. Besides, the caret does not show up inside the div, like in the [image](http://s10.postimage.org/6wu6iu3e1/spanselected.png). Is there anything I can do to prevent this? – Crista23 Oct 18 '12 at 09:44
In fact I solved the problem by moving the range end with 1 character. Thank you very much, your answers helped me a lot! I also found another post of yours [here](http://stackoverflow.com/questions/7402794/contenteditable-div-replace-innerhtml-on-the-fly), it was incredibly helpful! Thanks a lot! – Crista23 Oct 18 '12 at 10:56

Javascript text range up to caret position

1 Answers1