Erhalten Sie Caret-Koordinaten auf einem contenteditable Div durch Javascript.

Question

Ich habe viel gesucht, aber ich konnte keinen Weg finden, (X, Y) Koordinaten für das Caret auf einem Inhalt editierbaren div zu bekommen, es gibt eine Menge von Inhalten im Internet darüber, aber das Problem keiner von die Seiten, die ich gefunden habe, erhalten die Koordinaten entsprechend der Oberseite des Divs, also meine Frage auf eine einfachere Art ist:

Wie kann ich die (X, Y) Koordinaten des Caret auf einem contenteditable Div erhalten, aber das Y-Koordinate muss nach dem oberen Teil des Div berechnet werden und nicht von der Spitze des sichtbaren Teils der Seite?

Hinweis 1: Ich brauche speziell die Y-Koordinate.

Hinweis 2: Ich kann nur reines Javascript, kein JQUERY verwenden.

Mein Weg:

ich keinen direkten Weg, dies zu tun gefunden haben, um dieses Problem zu umgehen dachte ich auf dem Erhalten des Y nach dem sichtbaren Teil der Seite und dem verborgenen Teil des Koordinaten Teile und summiere die Ergebnisse (ich arbeite gerade daran, aber ich bekomme kein Glück!).

Answer 1

versuchen diese 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) 
}); 

Answer 2

auf (X, Y) zu finden koordinieren und rein mit Hilfe von Javascript, diese Funktion ich den Trick kann tun gefunden: in diesem Source finden Sie alle Erklärungen über ihren Prozess finden (der Code unten aus der gleichen Quelle entnommen wird):

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

1. get Auswahl und Reichweite

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

2. Einsatz div kollabierte

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

3. get div Koordinaten

4. der Div entfernen