XY Caret Coordinates inside a contenteditable div

Question

I am looking for a way to get the caret x y coordinates inside a contenteditable div, in a similar manner to how you can get the mouse coordinates using window.event since I need to open a pop-up exactly where the user is with the caret inside the contenteditable div. How can I do this? Many thanks!

Answer 1

Here's one approach:

Coordinates of selected text in browser page

However, in some circumstances this will not give you coordinates, in which case you'd need to fall back to inserting an element at the caret, getting its position and removing the element again.