javascript - 当使用 JavaScript 将光标设置为节点的开头时，Google Chrome 将光标移动到前一个节点的末尾

Question

我在 TinyMCE 实例中有以下内容:

<p><span id="span1">Test</span><span id="span2">Bla</span></p>

当用户将光标放在“B”之前并开始输入时，我希望将文本输入到第二个范围内。 Google Chrome(准确地说，我使用的是 Chromium 11.0.696.65)将光标设置到第一个跨度的末尾，您可以使用以下代码进行验证:

document.body.innerHTML = '<p><span id="span1">Test</span><span id="span2">Bla</span></p>';
document.designMode = "on";
// Now click between the “t” and the “B”
var sel = document.getSelection();
alert(sel.baseNode.data);

不幸的是，似乎无法手动将焦点设置到第二个跨度的开头:

var span = document.getElementById("span2");
sel.setBaseAndExtent(span, 0, span, 0);
alert(sel.baseNode.data); // Is still “Test”!
sel.setBaseAndExtent(span, 1, span, 1); // Move inside the span for testing
alert(sel.baseNode.data); // Now it’s “Bla”…

谷歌浏览器似乎再次将光标移动到上一个节点的末尾。我也尝试修改 Range 对象，但这导致了同样的问题。

我想不出解决这个问题的方法，有没有人知道是什么原因导致的以及如何解决？

干杯，
坦诚

Answer 1

这是 WebKit 中一个长期存在的错误，多年来一直困扰着富文本编辑器开发人员。相关的 WebKit 错误:

• https://bugs.webkit.org/show_bug.cgi?id=23189
• https://bugs.webkit.org/show_bug.cgi?id=15256

不幸的是，没有合适的解决方案。我过去曾采用跟踪光标位置的方法，在当前文本节点的开头插入一个零宽度的空格字符，并在光标移到其他地方后将其删除，但这绝对是管理起来的痛苦，而且很难做到对。