解决contenteditable元素软换行时光标所在行高亮错位问题的求助

兄弟，我太懂你遇到的这个坑了！之前做轻量行内编辑器的时候，也被软换行时的光标行高亮错位搞崩溃过——用range.getBoundingClientRect()确实会在这种场景下掉链子，因为软换行是浏览器自动折行，DOM结构上还是同一个文本节点，光标在换行前后的位置对应的DOMRect y值完全一样，高亮条自然就没法正确跳到新行。

问题根源 #

本质上，range.getBoundingClientRect()返回的是整个选区（哪怕只是一个光标）对应的最小包围矩形，当光标处于软换行的开头时，这个矩形和上一行末尾的矩形是完全重叠的，所以我们没法通过这个值区分光标到底在软换行的哪一侧。

靠谱的解决方案：临时节点定位法 #

最稳妥的思路是：在光标位置插入一个临时的空元素，通过这个元素的位置来精准定位光标所在的行，之后再把这个临时元素删掉——这样就能完美避开软换行的DOMRect重叠问题。

我把你的代码修改了一下，核心就是在selectionchange事件里替换了位置获取的逻辑：

修改后的JavaScript代码

let edit = document.getElementById('edit');
let hLine = document.getElementById('highlightLine');
let selection = getSelection();
let y = hLine.getBoundingClientRect().y;

document.addEventListener("selectionchange", (event) => {
    // 先判断是否有有效选区，避免异常
    if (!selection.rangeCount) return;
    let range = selection.getRangeAt(0);
    
    // 创建临时span来精准定位光标位置
    const tempSpan = document.createElement('span');
    // 给临时span加样式，确保完全不影响布局
    tempSpan.style.cssText = 'position: absolute; width: 0; height: 0; overflow: hidden;';
    // 把临时span插入到光标当前位置
    range.insertNode(tempSpan);
    // 获取临时span的真实位置
    const rect = tempSpan.getBoundingClientRect();
    // 立即移除临时span，不留下痕迹
    tempSpan.remove();
    
    // 计算并设置高亮条的top值
    let newTop = String(5 + rect.y - y) + "px";
    hLine.style.top = newTop;
});

edit.addEventListener('focus', function(event) {
    hLine.style.opacity = "1";
});

edit.addEventListener('blur', function(event) {
    hLine.style.opacity = "0";
});

CSS代码（无需修改）

#container {
    position: relative;
}

#edit {
    width: 200px;
    height: 200px;
    padding: 5px;
    font-size: 18px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

#highlightLine {
    width: 200px;
    height: 25px;
    background-color: rgb(237, 237, 237);
    opacity: 0;
    position: absolute;
    z-index: -1;
    left: 5px;
    top: 5px;
}

HTML代码（可添加测试文本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <article id="container">
        <div id="edit" contenteditable="true">This is an example of this problem. Try typing more content to trigger soft wrap and test the highlight line.</div>
        <div id="highlightLine"></div>
    </article>
    <script src="script.js"></script>
</body>
</html>

为什么这个方法管用？ #

临时span会被精准插入到光标当前所在的位置，哪怕是软换行的开头，它的getBoundingClientRect()获取到的也是当前行的真实布局位置，完全不会和上一行的位置混淆。而且我们插入后立即移除，不会对页面布局或用户输入产生任何影响。

亲测这个方法能完美解决你遇到的软换行高亮错位问题，你可以试试！如果还有其他细节需要调整，随时说~

备注：内容来源于stack exchange，提问作者Linke