可編輯 div 點擊外部按鈕保持游標位置

contenteditable 的 div 點擊外部按鈕後呼叫 focus() 會導致游標跳至開頭。需手動儲存與還原 Selection 範圍。

解決方案

let savedRange = null;
editableDiv.addEventListener('blur', () => {
    const sel = window.getSelection();
    if (sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
});
btn.addEventListener('click', () => {
    editableDiv.focus();
    if (savedRange) {
        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(savedRange);
    }
});

關鍵點

• 在 blur 事件中儲存當前 Range（需 cloneRange() 避免後續失效）。
• 按鈕點擊後 focus() 再還原 Range，游標回到原位。
• 若按鈕在 mousedown 就觸發邏輯，可改用 mousedown 阻止預設行為 e.preventDefault() 避免 blur 先觸發。

參考 CSDN 文章 獲取更多細節。