要判斷一個可編輯div(contenteditable)中的光標是否位于最前面，可以使用以下幾種方法：

方法一：使用Selection和Range API

function isCaretAtStart(div) {const selection = window.getSelection();if (selection.rangeCount === 0) return false;const range = selection.getRangeAt(0);const startOffset = range.startOffset;const startContainer = range.startContainer;// 檢查是否在div的最開始位置return (range.collapsed && startOffset === 0 && (startContainer === div || startContainer.parentNode === div));
}// 使用示例
const editableDiv = document.getElementById('myEditableDiv');
console.log(isCaretAtStart(editableDiv));

方法二：簡化版本

function isCaretAtStart(div) {const selection = window.getSelection();if (!selection.rangeCount) return false;const range = selection.getRangeAt(0);return range.collapsed && range.startOffset === 0 && range.startContainer === div.firstChild || range.startContainer === div;
}

方法三：處理更復雜的內容結構

如果div內可能有嵌套元素，這個更健壯的版本可能更合適：

function isCaretAtStart(div) {const sel = window.getSelection();if (!sel.rangeCount) return false;const range = sel.getRangeAt(0);if (!range.collapsed) return false;// 創建從div開始到光標位置的range進行比較const compareRange = document.createRange();compareRange.selectNodeContents(div);compareRange.setEnd(range.startContainer, range.startOffset);return compareRange.toString() === '';
}

使用注意事項

1. 這些方法應在光標位置變化時調用（如監聽keyup、mouseup或selectionchange事件）
2. 對于空div，光標位置通常被認為是在最前面
3. 不同瀏覽器可能有細微差異，建議進行充分測試

事件監聽示例

const editableDiv = document.getElementById('myEditableDiv');
editableDiv.addEventListener('keyup', function() {if (isCaretAtStart(this)) {console.log('光標在最前面');}
});

這些方法可以幫助你準確判斷光標是否位于可編輯div的最前面位置。