How to Keep the Cursor Position in a Content Editable Div After Focus?

Setting Cursor Position on ContentEditable

Problem:

Content editable

elements tend to reset the cursor position to the beginning of the text every time focus is regained. This can be undesirable when the cursor needs to be restored to its previous position.

Solution:

To address this issue, the following cross-browser solution can be employed:

Step 1: Save Selection

Attach event listeners (onmouseup and onkeyup) to the

to capture the current cursor position (savedRange) when the mouse button is released or a key is released.

Step 2: Restore Selection

Step 2 (a): On Focus

Attach an event listener (onfocus) to the

that restores the previously saved selection.

Step 2 (b): On Click (Optional)

To preserve the selection on click, additional steps are required:

• Register onclick and onmousedown event listeners that cancel the click event (cancelEvent()).
• Inside cancelEvent(), restore the saved selection and set isInFocus to true.
• On blur (onblur), set isInFocus to false.

Complete Code (Including Selection Restoration on Click):

<div><pre class="brush:php;toolbar:false">var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}