Question

我不知道标题是否正确。问题在于，当它聚焦在一个可信的元素中时，我找到了一个片段来获取光标位置。我理解整个代码，但有五行我不知道它们是好的。

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

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

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

Answer 1

这看起来像我的代码，来自this question。它正在尝试完成的任务过于复杂，我提供了simpler alternative to a similar question，我建议使用它。我现在更新了原始答案，并附有更简单答案的链接。

关于你的功能是什么，你可以过滤节点。 TreeWalker访问容器节点内的所有文本节点，并仅生成位于选择结束之前的节点。在每个文本节点上调用过滤器函数，创建包含文本节点的范围，并使用compareBoundaryPoints()检查文本节点的末尾是否在文档中的结尾比选择范围的末尾。

比较范围之间的边界点

1 个答案: