1

I've written an article here.

Basically, what I want to do is select the element before a DIV in a contenteditable area. I'm running into behavior that I do not understand and find myself wondering if this is how "it's supposed to work".

Consider the following markup:

<DIV contenteditable="true">foo<div id="test">bar</div></div>

I want to select the element before <div id="test">.

So I use:

var sel = document.getSelection();
var range = document.createRange();
var dom_node = document.getElementById( 'test' );

// this is the critical method

range.setStartBefore( dom_node );
range.collapse( true );
sel.removeAllRanges();
sel.addRange( range );
console.log( "selection is :", document.getSelection().getRangeAt(0) );

(Unfortunately, trying this as jsfiddle.net generates some jsfiddle error so I put it up on a static page here)

The range that I am getting is very different between FireFox and Chrome.

Chrome returns a startContainer of a textnode with a startOffset of 3 which nicely points just past the text 'foo'. This is what I would expect. The cursor is moved to that position.

FireFox returns a startContainer of the editable DIV with an offset of 1, pointing to the entirety of the textnode. Not what I would expect. The cursor (if you focus the div), points just to the left of 'bar'.

It becomes stranger if the HTML is changed to:

<DIV contenteditable="true"><div>foo</div><div id="test">bar</div></div>

Repeating the experiment, FireFox returns a startContainer with the editable DIV and a startOffset of 1. The cursor remains before 'bar'. Given the results from the last test, this makes sense to me.

Chrome, however, returns a startContainer with a textnode with length of 0 and nextSibling previousSibling that are both null but a parentNode that is set to the div id=”test”. The cursor remains in front of 'bar'.

Is this the correct behavior? What are you supposed to do when you get a range like this? Or is setStartBefore()/After() just broken?

1

1 Answer 1

2

The issue is about how WebKit normalizes a range when it is selected and not the range itself. The basic methods of Range such as setStartBefore() work consistently between WebKit and Mozilla (and indeed IE >= 9 and Opera).

Ranges don't exist purely to service selections, and Range boundaries can exist in any type of node, not just text nodes. For non-text-based nodes (text nodes, comments, cdata), a range boundary is expressed as the number of child nodes preceding the boundary within a parent node. This is true in all browsers. It's only when the range is added to the selection that things are inconsistent.

In Chrome, your second example places the caret at the start of the "bar" text node. See http://jsfiddle.net/cRwee/

3
  • Thanks for replying (again .. you've been so helpful). But what I don't understand is why it doesn't place the caret at the end of the previous text node. If I'm asking for a range 'before' the div, shouldn't it provide me something that is actually 'before' it? that's where I'm getting very confused. And why do I get a zero width text node as the startContainer in Chrome that has neither a previousSibling or a nextSibling? Commented Jan 18, 2013 at 19:21
  • @YermoLamers: Is it the range setStartBefore() or just what happens when you add that range to the selection that's confusing you? Re. the Chrome thing, I can't replicate that, so I may be doing it wrong or missing the point.
    – Tim Down
    Commented Jan 18, 2013 at 23:41
  • Ugh. Ok, I redid the experiment using the code I posted. Now I can't reproduce what I have been seeing either. I swore I was getting empty 0 length text nodes when attempting setStartBefore() between two divs. (i.e. the second case). And these 0 length text nodes had no next or previous sibling. I did the experiment a dozen times yesterday (but did not close and restart the browser during that whole time.) I guess it's possible that I was making a cross eyed error, but after 8 hours I suspect not. Very strange. I'll have to see if I can reproduce it. Damn. Commented Jan 19, 2013 at 1:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.