Home > Article > Web Front-end > How to Maintain Cursor Position in a ContentEditable ``?

How to Maintain Cursor Position in a ContentEditable ``?

Barbara StreisandOriginal: 2024-11-12 08:59:02209browse

Maintain Cursor Position in a ContentEditable

When working with content editable

elements, it's often desirable to retain the cursor position after the element regains focus. By default, browsers typically reset the cursor to the beginning of the text upon re-focus.

Solution Overview

To solve this issue, we store the current cursor position when the div loses focus and restore it when it regains focus. Here's an implementation that works across major browsers:

var savedRange; // Variable to store the saved selection
var isInFocus; // Flag to track focus state

function saveSelection() {
  if (window.getSelection) {
    // Browser-specific logic to save the selected range
    savedRange = window.getSelection().getRangeAt(0);
  }
}

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

  if (savedRange != null) {
    // Browser-specific logic to restore the saved range
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    }
  }
}

// Optional code for selection restoration on click
function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
  }
}

// Event handlers for saving and restoring selection
$(document).ready(function() {
  $("#area").focus(function() {
    isInFocus = true;
  });

  $("#area").blur(function() {
    isInFocus = false;
    saveSelection();
  });

  $("#area").mouseup(function() {
    saveSelection();
  });

  $("#area").keyup(function() {
    saveSelection();
  });

  $("#area").focusin(function() {
    restoreSelection();
  });

  // Optional event handlers for restoring selection on click
  $("#area").mousedown(function(e) {
    return cancelEvent(e);
  });

  $("#area").click(function(e) {
    return cancelEvent(e);
  });
});

This solution covers both the restoration of the cursor position upon re-focus and the optional behavior of restoring the selection on click. It is compatible with all major browsers and provides a definitive solution to the problem of losing cursor position in a content editable

The above is the detailed content of How to Maintain Cursor Position in a ContentEditable ``?. For more information, please follow other related articles on the PHP Chinese website!

default this position issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to POST x-www-form-urlencoded Data with Fetch?Next article：How to POST x-www-form-urlencoded Data with Fetch?

See more

How to Maintain Cursor Position in a ContentEditable ``?

Related articles