0

タイトルが正しいかわかりません。コンテンツ編集可能な要素にフォーカスされているときにカーソル位置を取得するためのスニペットを見つけました。私はコード全体を理解していますが、それらが何が良いのかわからない5行があります。

Ok。この行は関数であり、パラメーターとして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

どうもありがとうございました、私はそれを扱う前にこのことを理解したいだけです。長い投稿でごめんなさい。

4

1 に答える 1

2

この質問から、これは私のコードのように見えます。それが達成しようとしているタスクにとっては非常に複雑であり、代わりに使用することをお勧めする同様の質問のより簡単な代替案を提供しました。簡単な回答へのリンクを使用して、元の回答を更新しました。

その関数が何をするかについてのあなたの質問に関しては、それはノードをフィルタリングするためにあります。TreeWalkerは、コンテナノード内のすべてのテキストノードにアクセスし、選択が終了する前に配置されているノードのみを生成します。フィルタ関数は各テキストノードで呼び出され、テキストノードを含む範囲を作成し、を使用してテキストノードの終わりが選択範囲の終わりよりもドキュメント内で早いかどうかをチェックしますcompareBoundaryPoints()。

于 2012-06-14T09:34:11.327 に答える