Get caret coordinates on a contenteditable div through javascript.

Question

I've been searching a lot but i could't find a way to get (X,Y) coordinates for the caret on a content editable div,there's a lot of content on the web about this,but the problem none of the pages i found get the coordinates according to the top of the div,so my question in a simpler way is:

How can i get the (X,Y) coordinates of the caret on a contenteditable div,but the Y coordinate must be calculated according to the top of the div and not from the top of the visible part of the page?

Note 1: I need specially the Y coordinate.

Note 2: I can only use pure javascript,no JQUERY.

My way:

I haven't found a direct way to do this,so as a workaround i thought on getting the Y coordinate according to the visible part of the page and the hidden part of the Div and sum the results(I'm currently working on this but i getting no luck!).

Answer 1

1. get selection and range

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
   

2. insert collapsed div

    var div = document.createElement(...)
    range.insertNode(div)
   

3. get div coordinates

4. remove the div

Answer 2

try this:

var selection = window.getSelection(),
    range = selection.getRangeAt(0),
    rect = range.getClientRects()[0];

in the rect var you should find the position:

rect.left -> for the x coordinate rect.top -> for the y coordinate

there is also rect.width and rect.height. In case the user has some text selected rect.width will be >0.