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.

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.

• javascript

• 7 Can you expand a bit more on what you're trying to do? What are A and B, for instance? – T.J. Crowder Commented Jun 25, 2012 at 14:23
• 3 I'm sure you can make this question a little better and explain with more details what you're trying to do. – MilkyWayJoe Commented Jun 25, 2012 at 14:24
• @T.J.Crowder There is not really A and B. When you drag with your mouse and select a text it's from (30,43) to (343,234) for exemple. And I want to have the selection you would have with these numbers – user1365010 Commented Jun 25, 2012 at 14:26
• 1 are you talking about highlighting text in an input box? this is done by character, not by pixel. – jbabey Commented Jun 25, 2012 at 14:26
• @jbabey I mean selecting like this fiddle: jsfiddle.net/edelman/KcX6A/339 – user1365010 Commented Jun 25, 2012 at 14:26

2 Answers 2

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();
    }
}

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);