首先进行诊断，然后进行治疗。
诊断
这种奇怪的行为是由于Chrome和Firefox似乎以不同的方式处理换行符。在Chrome和Firefox中执行以下代码片段。唯一的区别是我添加了
anchorOffset: ${domSelection.anchorOffset}
将结果输出到控制台。我们将在下面讨论结果。
const textEl = document.getElementById("myText")
textEl.addEventListener("keyup", (event) => {
const domSelection = window.getSelection();
if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
let offsetNewLine = 0;
let domRange = domSelection.getRangeAt(0);
let 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);
let nextCharacterRect = newRange.getBoundingClientRect();
console.log(`anchorOffset: ${domSelection.anchorOffset}, 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>
浏览器在这里的换行位置不同，但这不是重点。首先看一下
Chrome的输出。请注意，
caret直接跳到下一行，实际存在的空格已经被
转换为换行符（NL），看起来是经典的回车加换行符（CR+LF）形式。因此，在NL之后，Chrome看到光标，就像人眼一样，已经在第二行上。
| 第一行最后一个非空白字符 |
换行符 |
第二行第一个非空白字符 |
| 偏移量61处的't' |
偏移量62处的NL |
偏移量63处的'p' |
现在是Firefox。插入符号会跟随空格，然后跳到下一行。空格（SP）被保留了。然而，插入的换行符没有被计算在偏移量中。此外，它仍然被视为第一行的一部分，也就是说，人眼看到光标在第二行，但Firefox却在第一行。不知为何。
因此，Firefox在第一行的末尾迭代两次（先是SP，然后是NL），但偏移量只增加一次（计算SP和NL的总和），而且实际上还没有真正移动到第二行。所有这些使得这里的情况变得混乱不堪。
在第一行的最后一个非空白字符是偏移量为73的'n'，换行符是SP和NL，它们的偏移量都是74，而第二行的第一个非空白字符是偏移量为75的't'。
治疗
目前我能想到的唯一方法是检测浏览器并引入一个针对Firefox的解决方案，所以可以通过以下方式检查Firefox：
const isFirefox = typeof InstallTrigger !== 'undefined';
经过测试，仍然可以在Firefox 111上运行。
所以，我们可以通过标记是否处于Firefox换行来解决这个问题。让我们首先添加一些全局变量：
// whether we're in a (Firefox-)NL
let isNewline = false;
// whether we're in Firefox
const isFirefox = typeof InstallTrigger !== 'undefined';
请注意，如果需要的话，也可以在其他浏览器中使用
isNewline。接下来，我们将Firefox特定的换行功能添加到
keyup处理程序中。
if(isFirefox && rect.y < nextCharacterRect.y)
{
if(isNewline)
{
domRange = newRange;
domSelection.getRangeAt(0);
rect = domRange.getBoundingClientRect();
isNewline = false;
}
else
isNewline = true;
}
这可以通过选择方向检测进行精调来延长。让我们将所有内容放在以下片段中。请注意，
domRange和
rect改为使用
let而不是
const。
let isNewline = false;
const isFirefox = typeof InstallTrigger !== 'undefined';
const textEl = document.getElementById("myText")
textEl.addEventListener("keyup", (event) => {
const domSelection = window.getSelection();
if (domSelection && domSelection.isCollapsed && domSelection.anchorNode) {
let offsetNewLine = 0;
let domRange = domSelection.getRangeAt(0);
let 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();
if(isFirefox && rect.y < nextCharacterRect.y)
{
if(isNewline)
{
domRange = newRange;
domSelection.getRangeAt(0);
rect = domRange.getBoundingClientRect();
isNewline = false;
}
else
isNewline = true;
}
console.log(`anchorOffset: ${domSelection.anchorOffset}, 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>
结论
可能有更优雅和复杂的解决方案，但目前这个方法已经能够胜任工作。基本上，我们通过强制实施类似Chrome的LF+CR换行方式来修改Firefox的换行行为。唯一的区别是在实际换行之前，即在Firefox中我们仍然需要按两次键才能进入下一行，而不像Chrome只需按一次。但这在这里并不重要。除此之外，两个浏览器的行为现在是等效的。此外，如果需要，这个解决方法也可以轻松地适用于其他浏览器。
致谢
使用换行符表示变量的最后灵感来自
post，该帖子由
@herrstrietzel发布，其中还讨论了选择方向和鼠标交互的方法。
console.log()行使用了错误的语法。我已经为您纠正了这个问题，并将代码移入了一个内联片段中，这样您更有可能得到一些答案，因为人们更容易看到您所谈论的代码。 - undefineddomSelection.anchorNode.textContent[newRangeNextOffset]的值以查看它认为下一个字母是什么时，它比我预期的位置提前了一个位置。通过将设置newRangeNextOffset值的三元语句中的+1移动，我成功修复了这个问题。为什么不直接使用domRange.endOffset来获取光标位置呢？ - undefinedDomSelection和domRange是折叠的，但是domSelection.anchorNode.textContent[domRange.endOffset]将显示光标右侧的字符。当你在第一行的末尾时，下一个字符是" "，所以我的想法是获取下一个字符的位置，并检查它是否已经在第二行，但这还不够，因为第二行的第一个位置仍然等于第一行。我可以使用currentOffset + 2，但这在Chrome上不起作用，因为它会认为我在第二行提前一个字符。 - undefined