如何在 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;
  }
}