Question

In programmatically defining a range/selection in JavaScript, is it not possible to have the focusOffset in the range be before the anchorOffset? How do we define a right to left selection then?

a JS fiddler link for example: http://jsfiddle.net/johncch/ejVab/1/

Answer 1

The way to create a “backwards” selection is slightly non-obvious. It can’t be done by simply selecting a Range via the selection addRange() method because ranges are intrinsically directionless. You need to use the extend() method of the selection (example below).

Note this doesn’t work in any version of IE, including 9: unlike previous versions, IE 9 does have standard selection and range objects but at the time Microsoft was developing IE 9, extend() was non-standard so they didn’t implement it, meaning that there is no way to create a backwards selection programmatically in any version of IE yet released. IE 10 did not implement extend(), despite my filing a bug on the IE bug tracker.

function selectRangeBackwards(range) {
    var sel = window.getSelection();
    var endRange = range.cloneRange();
    endRange.collapse(false);
    sel.removeAllRanges();
    sel.addRange(endRange);
    sel.extend(range.startContainer, range.startOffset);
}