0

不知道标题对不对。问题是我找到了一个片段来获取光标位置，当它集中在一个 contenteditable 元素中时。我了解整个代码，但是有五行我不知道它们的优点。

好的。这些行是一个函数，它作为参数传递给 Treewalker。他们处理比较边界点，但是，如何，为了什么？我一直在研究很多天，还没有找到ist功能。

function(node) {
        var nodeRange = document.createRange();
        nodeRange.selectNode(node);
        return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
            NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    }

整个片段是这样的（只是为了将其置于上下文中）：

function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
    node,
    NodeFilter.SHOW_TEXT,
    function(node) {
        var nodeRange = document.createRange();
        nodeRange.selectNode(node);
        return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
            NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    },
    false
);

var charCount = 0;
while (treeWalker.nextNode()) {
    charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
    charCount += range.startOffset;
}
return charCount;
}

document.body.addEventListener("keyup", function() {
  var el = document.getElementById("test");
  var range = window.getSelection().getRangeAt(0);
  document.getElementById("position").innerHTML = "Caret char pos: " + getCharacterOffsetWithin(range, el);
}, false);

可以在这里看到工作：JS Fiddle

非常感谢，我只是想在使用它之前了解这些东西。对不起，很长的帖子。

4

1 回答 1

2

这看起来像我的代码，来自这个问题。它试图完成的任务过于复杂，我提供了一个更简单的替代方案来替代我建议使用的类似问题。我现在已经用更简单的答案的链接更新了原始答案。

至于您关于该功能的作用的问题，它可以过滤节点。TreeWalker 访问容器节点中的所有文本节点，并且只产生位于选择结束之前的节点。在每个文本节点上调用过滤器函数，创建一个包含文本节点的范围，并使用 . 检查文本节点的结尾是否在文档中早于选择范围的结尾compareBoundaryPoints()。

于 2012-06-14T09:34:11.327 回答