javascript - 将选择设置为节点的边缘会使 WebKit 报告不一致的范围

Question

假设以下 DOM 树:

<div id="edit" contenteditable="true">
  this content <a id="link" href="http://www.google.com/">contains</a> a link
</div>

然后在 anchor 之后创建一个范围:

var r = document.createRange();
var link = document.getElementById('link');
r.setStartAfter(link);
r.setEndAfter(link);

正如预期的那样，它的 commonAncestorContainer 是具有 id edit 的元素:

console.log(r.commonAncestorContainer);  /* => <div id="edit" contenteditable="true">…</div> */

将选择设置为此范围:

var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

现在查询当前选择范围的窗口并检查它的 commonAncestorContainer:

var r2 = s.getRangeAt(0);
console.log(r2.commonAncestorContainer);

你会发现在 Firefox 中，结果是符合预期的；具有 id edit 的相同元素。

但在 WebKit 浏览器中，选择范围祖先容器突然变成 anchor 内的文本节点； “包含”，但是当您开始输入时，您会发现您确实不在 anchor 内。 WTF!？

Click here for a live demo .

这种行为背后是否有任何潜在的理由？有什么理由认为它不是 WebKit 错误？？

感谢您的 $.02。

Answer 1

WebKit 只允许将 DOM 中的某些位置用作选择边界或插入符位置。因此，它会修改使用选择的 addRange() 方法选择的范围以符合此要求。另见 https://stackoverflow.com/a/14104166/96100 .

还有另一个问题在起作用，即 WebKit 在链接末尾有一个插入符位置的特殊情况，它会将在该位置键入的文本放置在链接之后而不是链接内部。鉴于浏览器将选择报告为在链接内，这无疑是一个令人讨厌的 hack。但是，其他内联元素不会发生这种情况，正如您在演示的这个修改版本中看到的那样:

http://jsbin.com/EYoWuWe/7/edit