通过javascript获取可编辑div上的插入符坐标。

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

to find on (X,Y) coordinate and using pure javascript, this function I found may do the trick: in this Source you will find all explanation about their process (the code below is taken from the same source) :

function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

Answer 3

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.

Answer 4

try this http://plnkr.co/edit/T2S7sKByTIesEVC6R8jQ?p=preview

document.addEventListener("DOMContentLoaded", function(event) { 
  var pointer = document.querySelector('#marker')
  function checkCaret() {
    if(document.getSelection()) {
      if(document.getSelection().baseNode) {
        var position = document.getSelection().baseNode.parentNode.getBoundingClientRect()
        pointer.style.top = position.top + 'px'
      }
    }
  }
  setInterval(checkCaret, 500)
});