如何获取contenteditable div中光标的X与Y像素偏移量？

你可以通过利用Range对象的边界矩形属性来获取光标X、Y坐标，以下是修改后的完整代码：

function getCaretInfo(editableDiv) {
    let caretPosEnd = 0, caretPosStart = 0;
    let caretX = 0, caretY = 0;
    let sel, range;

    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode === editableDiv || range.commonAncestorContainer === editableDiv) {
                caretPosEnd = range.endOffset;
                caretPosStart = range.startOffset;
                
                // 获取视口坐标系下的光标坐标
                const rect = range.getBoundingClientRect();
                caretX = rect.left;
                caretY = rect.top;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() === editableDiv) {
            const tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            const tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPosEnd = tempRange.text.length;
            caretPosStart = caretPosEnd;

            caretX = range.boundingLeft;
            caretY = range.boundingTop;
            
            editableDiv.removeChild(tempEl);
        }
    }

    return {
        start: caretPosStart,
        end: caretPosEnd,
        x: caretX,
        y: caretY
    };
}

核心修改点： #

• 新增caretX、caretY变量存储坐标信息
• 现代浏览器中通过range.getBoundingClientRect()获取光标所在区域的边界矩形，left和top分别对应X、Y轴相对于视口的偏移量；如果需要相对于父元素的坐标，可以用editableDiv.getBoundingClientRect()的left/top值做差值计算
• IE旧版本中使用range.boundingLeft和range.boundingTop直接获取坐标
• 修复了原代码中选区容器判断的漏洞，确保光标在编辑框直接子元素内时也能正常识别
• IE兼容逻辑中添加了临时元素的移除操作，避免残留DOM节点

内容的提问来源于stack exchange，提问作者programORdie