Take the 2-minute tour ×

I have an question about getting the page coordinates of a text selection in javascript. I do know how to get the selected text etc. but that is not what I'm looking for... I need the coordinates (in pixels) of the beginning of the text selection.

I tried using the cursor coordinates but this didn't work quite well because the cursor coordinates and the beginning of the selection are not always the same (for example when a user drags over a text).

I hope someone has the solution!

share|improve this question
add comment

1 Answer

up vote 19 down vote accepted

In recent non-IE browsers (Firefox 4+, WebKit browsers released since early 2009, Opera 11, maybe earlier), you can use the getClientRects() method of Range. In IE, you can use the boundingLeft and boundingTop properties of the TextRange that can be extracted from the selection. Here's a function that will do what you want in recent browsers.

jsFiddle: http://jsfiddle.net/aSUSh/5/


function getSelectionCoords() {
    var sel = document.selection, range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            x = range.boundingLeft;
            y = range.boundingTop;
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                var rect = range.getClientRects()[0];
                x = rect.left;
                y = rect.top;
    return { x: x, y: y };

I'm going to add a fuller implementation of this with fallbacks for older browsers to my Rangy library soon.


I submitted a WebKit bug as a result of the comments, and it's now been fixed.


share|improve this answer
Works perfectly on single line selections, but when you select multiple lines (starting from somewhere half-where in the first line) it shows the coordinates for the beginning of the first selection-line not the beginning of the selection it self.... I know that is probably because of the getBounding function but is there any way to change that? –  Bouke Jul 27 '11 at 18:02
@Bouke: Ah, fair point. I've updated my answer to do as you asked, by collapsing the range to a single point at the start before getting its position. –  Tim Down Jul 27 '11 at 22:46
@Bouke: Updated again, and is now working on WebKit. –  Tim Down Jul 28 '11 at 17:08
I have tried this code. It is returning always x: 0, y:0 even the caret position is moved in firefox 20.0.1. Please have a look at this similar question which I asked recently. I am looking for a cross-browser solution which works in IE8+, chrome and firefox. –  Mr_Green May 20 '13 at 9:31
@Mr_Green: This code is specific to selections/ranges within regular HTML content rather than textareas, as is Rangy. I don't believe it is possible to create a general cross-browser solution for getting coordinates of the textarea cursor without doing lots of tedious text measuring, which is why I haven't answered your other question. –  Tim Down May 20 '13 at 10:41
show 3 more comments

Your Answer


