tatsächliche DOM Position von Caret und nicht der Textposition

Question

Ich bin nicht in der Lage, eine Antwort auf diese Frage zu finden. Einer meiner Anwendungsfälle ist es, ein kleines Popup unterhalb der aktuellen Caret-Position in einem contenteditable anzuzeigen. Ich muss die Position (die DOM-Position) des Caret finden, bevor ich dieses Popup richtig anzeigen kann.

Alle Suchen ich in der Regel am Ende getan habe versucht, die Textposition des Cursors und nicht der tatsächliche XY in Bezug auf den DOM zu finden. Wie kann dies erreicht werden?

EDIT: Komponente der Textarea-Caret-Position Plugin hilft nicht, da es wie ein Plugin speziell für Ein- und Textbereich des aussieht. Ich werde etwas für zufriedene Leute brauchen.

Answer 1

konnte ich dieses Problem nach einiger Einsicht auf Komponenten der Textarea-Caret-Position überwinden. Alles, was ich hier getan habe, war, einen temporären Knoten an der aktuellen Caret-Position einzufügen und dann die Koordinaten dieses Knotens (der sich an der Position des Caret befindet) zu erhalten. Sobald die Koordinaten empfangen wurden, entfernen Sie den temporären Knoten.

var selection = this.document.getSelection(); 
var node = selection.anchorNode; 
var domNode = node.nodeType === 3 ? node.parentNode : node; 

var tempDomNode = $("<span class='caret'></span>"); 
var tempNode = tempDomNode[0]; 

domNode.appendChild(tempNode); 
var left = tempDomNode.offset().left; 
var top = tempDomNode.offset().top; 
domNode.removeChild(tempNode); 

"left" und "top" sollten jetzt die Position des Caret enthalten.