如何在 ContentEditable Div 中设置和维护光标位置？

在 contentEditable <div> 上设置光标位置

处理 contentEditable

<div> 时，默认浏览器功能会将光标位置重置为文本的开头恢复焦点后。要解决此问题，请考虑以下解决方案：

存储和恢复光标位置：

1. 保存当前位置： 在 onmouseup 和onkeyup 事件，将当前光标位置存储在变量中， saveRange。
2. 恢复位置：在onfocus事件中，从savedRange恢复保存的选择。

此方法确保光标位于最后一个已知位置当 div 重新获得焦点时。

处理点击：

要在单击 div 时恢复选择，需要执行以下附加步骤：

1. 取消单击事件： 附加 cancelEvent() onclick 和 onmousedown 事件。此函数可防止这些事件的默认行为，并调用restoreSelection()。
2. 跟踪焦点状态： 使用 isInFocus 变量确定 div 是否处于焦点状态。仅当 div 未获得焦点时取消点击事件。

工作代码：

<div>

var savedRange, isInFocus;

function saveSelection() {
  savedRange = window.getSelection ? window.getSelection().getRangeAt(0) : document.selection.createRange();
}

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

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange) {
    if (e && e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    } else {
      window.event.cancelBubble = true;
    }
    restoreSelection();
    return false;
  }
}