在嘗試選擇注入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使用輸入元素的值，因此它不會遇到此問題。 您可能需要在此處檢查兼容性矩陣以檢查哪些瀏覽器支持它。