Yes, I know… there are certainly more exciting topics to write about than dealing with cursors on a web page. But since I struggled a lot with this issue in my latest project, I decided to share my approach — hoping that it might help one or the other.

In this article, we are going to create two methods for locating the caret: One to get the X/Y coordinates and another to get the index position within the content.

The Problem

Recently, I built a text-editor where users could edit HTML content inside a contenteditable element. To adjust the styling of the content, I wanted to display a context menu right above the cursor.

To do that, we need to know the exact position of the caret. But how do we get to know that?

If you use an input or textarea element, it is relatively easy to get that information because you have a selectionStart and selectionEnd attribute available on the form element itself.

But for contenteditable elements you do not have these attributes. Besides, editable elements can have nested HTML elements inside (e.g. a strong tag inside a div). That makes it even harder.

Fortunately, we can solve both issues easily.

#web-development #contenteditable #front-end-development #programming #javascript