javascript - 在尝试选择注入(inject)了 appendChild() 的节点时，如何防止 Range.selectNode() 选择过多的 DOM？

Question

我在结合使用 appendChild() 时遇到问题和 Range.selectNode()在 JavaScript 中。

尝试使用范围来选择新附加的 <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 使用输入元素的值，因此不会遇到此问题。您可能需要检查兼容性矩阵 here检查哪些浏览器支持它。