0

ネストされたノードを持つ編集可能な div 内のキャレットの選択インデックスを見つけようとしています。

例 ( | はカーソル):

<div contenteditable="true">1234<span>5678|9</span></div> //Returns 4

div 内のすべての文字のインデックスが必要なため、上記の例では 8 が返されます。

これは私が現時点で使用しているものです。

var sel = window.getSelection();
    return sel.anchorOffset;

commonAncestor やその他の選択と範囲の方法を使用してみましたが、これを見つける方法がわかりません。

4

1 に答える 1

2

ツリーをトラバースします！これがデモです。

function getSelectionOffsetFrom(parent) {
    var sel = window.getSelection();
    var current = sel.anchorNode;
    var offset = sel.anchorOffset;

    while(current && current !== parent) {
        var sibling = current;

        while(sibling = sibling.previousSibling) {
            if(sibling.nodeType === 3) {
                offset += sibling.nodeValue.length;
            } else if(sibling.nodeType === 1) {
                offset += getContentLength(sibling);
            }
        }

        current = current.parentNode;
    }

    if(!current) {
        return null;
    }

    return offset;
}

function getContentLength(element) {
    var stack = [element];
    var total = 0;
    var current;

    while(current = stack.pop()) {
        for(var i = 0; i < current.childNodes.length; i++) {
            if(current.childNodes[i].nodeType === 1) {
                stack.push(current.childNodes[i]);
            } else if(current.childNodes[i].nodeType === 3) {
                total += current.childNodes[i].nodeValue.length;
            }
        }
    }

    return total;
}
于 2012-12-18T02:50:07.550 に答える