如何在焦點後保持遊標位置在內容可編輯 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))
  }
}