Question

我遇到了以下问题 - 我正在尝试选择跨越多个div的跨距文本。举个例子

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

现在在这种情况下，如果用户点击单词qwerty内的某处，我想选择文本'fghqwertuio' - ＆gt;所有相邻的跨度。我正在使用以下代码执行此操作：

    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;
        }
    }

当我记录发生的事情时 - 我正确地创建了包含我想要选择的文本的范围，但是将它们添加到选择对象似乎不起作用。当前选择仅是第一个添加的范围。任何有关如何解决这个问题的帮助将不胜感激。

Answer 1

在主流浏览器中，只有Firefox允许每个选择多个范围。在所有其他浏览器中，您只能使用一个范围。

您需要调整代码以创建一个范围，并使用范围的setStart()和setEnd()方法。此外，元素的style属性的属性使用驼峰大小写而不是连字符（即.backgroundColor而不是['background-color']）。

选择跨多个div问题的跨度

1 个答案: