Firefox中如何处理换行文本首尾位置的坐标偏移异常

我在用contentEditable="true"的<span>元素时，需要根据光标所在行放置绝对定位元素，但碰到Firefox的兼容性问题：当文本因容器宽度不够自动换行后，光标在第二行第一个位置时，getBoundingClientRect()返回的y偏移和第一行完全一样；光标在第一行末尾位置时也有同样的异常，只有把光标右移一位，y值才会正确显示当前行的位置。Chrome之前有类似问题但已经修复，控制台输出的CURRENT_TOP能直观看到这个异常。

复现代码 #

const textEl = document.getElementById("myText")

textEl.addEventListener("keyup", (event) => {
  const domSelection = window.getSelection();
  if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
    let offsetNewLine = 0;

    const domRange = domSelection.getRangeAt(0);
    const rect = domRange.getBoundingClientRect();
    const rects = domRange.getClientRects();
    const newRange = document.createRange();
    const newRangeNextOffset = domSelection.anchorNode.textContent.length < domSelection.anchorOffset + 1 ? domSelection.anchorOffset : domSelection.anchorOffset + 1

    newRange.setStart(domSelection.anchorNode, newRangeNextOffset);
    newRange.setEnd(domSelection.anchorNode, newRangeNextOffset);
    const nextCharacterRect = newRange.getBoundingClientRect();

    console.log(`CURRENT_TOP: ${rect.y}, NEXT_CHAR_TOP: ${nextCharacterRect.y}`);
  }
})

.text-container {
  width: 500px;
  display: inline-block;
  border: 1px solid black;
  line-height: 20px;
  padding: 5px;
}

<span id="myText" class="text-container" contentEditable="true">Go on the last position in the first row and come it to first position in the second row</span>

解决方案 #

针对Firefox的这个bug，可以通过两种方式修正光标位置的行偏移判断：

• 利用getClientRects()的多矩形返回值：当光标处于换行临界点时，Firefox会返回两个矩形（分别对应上一行末尾和下一行开头），取最后一个矩形的位置作为实际行位置。
• 对比相邻字符的坐标：如果当前光标x坐标大于下一个字符的x坐标但y相同，说明是换行到下一行的开头，手动根据行高修正y值。

修改后的代码如下：

const textEl = document.getElementById("myText")

textEl.addEventListener("keyup", (event) => {
  const domSelection = window.getSelection();
  if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
    const domRange = domSelection.getRangeAt(0);
    const rects = domRange.getClientRects();
    // 处理换行点：getClientRects返回多个矩形时取最后一个
    let currentRect = rects.length > 1 ? rects[rects.length - 1] : domRange.getBoundingClientRect();

    const newRange = document.createRange();
    const maxOffset = domSelection.anchorNode.textContent.length;
    const newRangeNextOffset = Math.min(domSelection.anchorOffset + 1, maxOffset);
    newRange.setStart(domSelection.anchorNode, newRangeNextOffset);
    newRange.setEnd(domSelection.anchorNode, newRangeNextOffset);
    const nextCharacterRect = newRange.getBoundingClientRect();

    // 修正第二行开头的y偏移：当前x大于下一个字符x且y相同，说明是换行
    if (currentRect.x > nextCharacterRect.x && currentRect.y === nextCharacterRect.y) {
      const lineHeight = parseInt(window.getComputedStyle(textEl).lineHeight);
      currentRect = { ...currentRect, y: currentRect.y + lineHeight };
    }

    console.log(`CURRENT_TOP: ${currentRect.y}, NEXT_CHAR_TOP: ${nextCharacterRect.y}`);
  }
})

说明 #

• 优先通过getClientRects()的返回结果判断换行情况，这是最准确的方式，因为Firefox会在换行临界点返回多个矩形。
• 额外的坐标对比作为兜底，确保在某些特殊场景下也能正确修正y值。
• 行高通过getComputedStyle获取，保证和容器实际行高一致。

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