1

次の問題があります。複数の div にまたがるスパン内のテキストを選択しようとしています。例を挙げると

<div>asd<span>fgh</span></div>
<div><span>qwerty</span></div>
<div><span>uio</span>asd</div>

このシナリオでは、ユーザーが単語内のどこかをクリックするとqwerty、「fghqwertuio」というテキストを選択したいと思います --> 隣接するすべてのスパン。これを行うには、次のコードを使用しています。

    var range = document.caretRangeFromPoint(lastTappedX, lastTappedY);
    range.selectNodeContents(range.startContainer);
    window.getSelection().addRange(range);

    var containerNodes = document.body.children[0].children;
    var whichChild = -1;

    for ( var i = 0; i < containerNodes.length; ++i) {
        if (containerNodes[i] === range.startContainer.parentNode.parentNode) {
            whichChild = i;
            break;
        }
    }

    if (whichChild === -1) {
        console.log("couldn't find the highlighted div");
    }

    // go right the dom tree
    for ( var i = whichChild + 1; i < containerNodes.length; ++i) {
        var containerChildren = containerNodes[i].children;
        if (containerChildren[0]
                && containerChildren[0].style['background-color']) {
            var newRange = document.createRange();
            newRange.selectNodeContents(containerChildren[0]);
            window.getSelection().addRange(newRange);
        }

        if (containerChildren.length > 1) {
            break;
        }
    }

    // go left the down tree
    for ( var i = whichChild - 1; i >= 0; --i) {
        var containerChildren = containerNodes[i].children;
        if (containerChildren[containerChildren.length - 1].style['background-color']) {
            var newRange = document.createRange();
            newRange
                    .selectNodeContents(containerChildren[containerChildren.length - 1]);
            window.getSelection().addRange(newRange);
        }

        if (containerChildren.length > 1) {
            break;
        }
    }

何が起こったかをログに記録すると、選択したいテキストを含む範囲を正しく作成していますが、それらを選択オブジェクトに追加することはできません。現在の選択範囲は、最初に追加された範囲のみです。これを解決する方法についてのヘルプは大歓迎です。

4

1 に答える 1

2

主要なブラウザーの中で、1 回の選択で複数の範囲を使用できるのは Firefox だけです。他のすべてのブラウザーでは、1 つの範囲に制限されます。

コードを微調整して 1 つの範囲を作成し、その範囲のメソッドsetStart()とsetEnd()メソッドを使用する必要があります。また、style要素のプロパティのプロパティは、ハイフンではなく (つまり.backgroundColorではなく['background-color']) キャメル ケースを使用します。

于 2012-06-15T09:18:43.343 に答える