在尝试选择注入appendChild（）的节点时，如何防止Range.selectNode（）选择过多的DOM？

Question

我在JavaScript中使用appendChild()和Range.selectNode()的组合遇到了问题。

当尝试使用范围来选择新附加的<textarea>节点时，它会选择太多的DOM。 复制和粘贴选择似乎只包含一个空格。

但是，如果我从一开始就将<textarea>节点放入DOM中（即不要用appendChild()添加它），那么它的效果非常好，我可以按预期复制和粘贴所选文本。

请注意，CSS在这里并不是必需的，但它突出了这样一个事实，即选择包含的不仅仅是<textarea> （或者至少它包含在Chrome中）。

HTML：

<div>
    <a class="hoverTrigger">Click to trigger textarea element with selected text</a>
</div>

CSS：

.floating {
    position: absolute;
}

JavaScript / jQuery（在DOM上运行）：

$(".hoverTrigger").click(createAndSelectStuff);

function createAndSelectStuff() {
    var textArea = document.createElement("textarea");
    textArea.className = "floating";
    textArea.value = "Some dynamic text to select";
    this.parentNode.appendChild(textArea);
    selectObjectText(textArea);
    return false;
}

function selectObjectText(container) {    
    var range = document.createRange();
    range.selectNode(container);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);    
}

这是一个jsFiddle 。

这是Chrome中的结果选择：

如何阻止这种情况发生，只需选择所需的文字？

Answer 1

将您的调用替换为selectObjectText ：

container.setSelectionRange(0, container.value.length);

textarea元素的问题在于它们不在DOM节点中保存它们的内容。 文本值是元素的属性。 当你调用range.selectNode ，会发生的是设置范围以包含传递给函数的节点和该节点的子节点，但由于textarea不将其文本存储在子节点中，因此您选择只有textarea 。

setSelectionRange使用输入元素的值，因此它不会遇到此问题。 您可能需要在此处检查兼容性矩阵以检查哪些浏览器支持它。