如何在焦点后保持光标位置在内容可编辑 Div 中？

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

问题：

Content editable

<div>每次重新获得焦点时，元素往往会将光标位置重置到文本的开头。当光标需要恢复到之前的位置时，这可能是不可取的。

解决方案：

要解决此问题，可以采用以下跨浏览器解决方案：

第 1 步：保存选择

附加事件侦听器（onmouseup 和onkeyup) 到

<div>;释放鼠标按钮或释放某个键时捕获当前光标位置 (savedRange)。

步骤 2：恢复选择

步骤 2 ( a): On Focus

将事件监听器 (onfocus) 附加到

<div>恢复之前保存的选择。

步骤 2 (b)：单击时（可选）

要在单击时保留选择，需要执行其他步骤：

• 注册取消点击事件的onclick和onmousedown事件监听(cancelEvent())。
• 在 cancelEvent() 内，恢复保存的选择并将 isInFocus 设置为 true。
• 在模糊 (onblur) 时，将 isInFocus 设置为 false。

完整代码（包括选择恢复点击）：

<div>

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))
  }
}