Set a selection range from A to B in absolute position

Question

How can I select programmatically from A(x1,y1) to B(x2,y2) ?

x1, y1, x2, y2 are pixel coordinates. I searched a lot and in all functions I found, we had to specify a specific tag and then it selects its content.

Answer 1

You can do this in current versions of all browsers. These browsers have at least one of the following:

• The standards-based approach, implemented by Firefox >= 20, from the CSSOM View spec: document.caretPositionFromPoint()
• WebKit's proprietary version of the same: document.caretRangeFromPoint().
• IE's proprietary TextRange object, which has a moveToPoint() method that takes pixel coordinates. However, it seems that moveToPoint(), which is used in all version of IE, can be buggy (see here and here, for example); I've simply been lucky that has worked in all the documents I've used it in.

However, Mozilla does not yet implement any of these and neither does Opera, so this can't be done in those browsers yet.

Firefox 20 and later supports document.caretPositionFromPoint(). Opera 15 supports document.caretRangeFromPoint()

Here's some example code. It works in IE 5+, WebKit from around 2010 onwards, Firefox >= 20 and Opera >= 15.

Live demo: http://jsfiddle.net/timdown/ABjQP/

Code:

function createSelectionFromPoint(startX, startY, endX, endY) {
    var doc = document;
    var start, end, range = null;
    if (typeof doc.caretPositionFromPoint != "undefined") {
        start = doc.caretPositionFromPoint(startX, startY);
        end = doc.caretPositionFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.offsetNode, start.offset);
        range.setEnd(end.offsetNode, end.offset);
    } else if (typeof doc.caretRangeFromPoint != "undefined") {
        start = doc.caretRangeFromPoint(startX, startY);
        end = doc.caretRangeFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.startContainer, start.startOffset);
        range.setEnd(end.startContainer, end.startOffset);
    }
    if (range !== null && typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof doc.body.createTextRange != "undefined") {
        range = doc.body.createTextRange();
        range.moveToPoint(startX, startY);
        var endRange = range.duplicate();
        endRange.moveToPoint(endX, endY);
        range.setEndPoint("EndToEnd", endRange);
        range.select();
    }
}

Answer 2

For Firefox or Opera there is a little workaround. This set the caret at the first position of an element:

console.log("moz or opera doesn't support caret by position so we have a workaround");
var range = doc.createRange();
var element = doc.elementFromPoint(startX, startY);
range.setStart(element, 0);