尝试选择用appendChild（）注入的节点时，如何防止Range.selectNode（）选择太多的DOM？ [英] How can I prevent Range.selectNode() selecting too much of the DOM when attempting to select a node injected with appendChild()?

问题描述

我正面临着使用 appendChild（）和 Range.selectNode（）的组合的问题JavaScript

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

但是，如果我把< textarea> 节点从开始进入DOM（即不要用 appendChild（）添加它），那么它的工作效果非常好，我可以按预期的方式复制和粘贴所选的文本。 / p>

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

HTML：

 < DIV> 
< a class =hoverTrigger>单击以触发具有所选文本的textarea元素< / a> 
< / div> 
  

CSS：

 code> .floating {
 position：absolute; 
} 
  

JavaScript / jQuery（在DOM上运行）：

  $（。hoverTrigger）。点击（createAndSelectStuff）; 
 
函数createAndSelectStuff（）{
 var textArea = document.createElement（textarea）; 
 textArea.className =floating; 
 textArea.value =要选择的一些动态文本; 
 this.parentNode.appendChild（textArea）; 
 selectObjectText（textArea）; 
返回false; 
} 
 
函数selectObjectText（container）{
 var range = document.createRange（）; 
 range.selectNode（container）; 
 window.getSelection（）。removeAllRanges（）; 
 window.getSelection（）。addRange（range）; 
} 
  

这是一个以检查哪些浏览器支持它。

I'm facing an issue with the combination of using appendChild() and Range.selectNode() in JavaScript.

When attempting to use a range to select the newly-appended <textarea> node, it selects too much of the DOM. Copying and pasting the selection seems to just contain a space.

However, if I put the <textarea> node into the DOM from the start (i.e. don't add it with appendChild()) then it works perfectly well and I can copy and paste the selected text as expected.

Note that the CSS isn't really necessary here, but it highlights the fact that the selection contains more than just the <textarea> (or at least it does in Chrome).

HTML:

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

CSS:

.floating {
    position: absolute;
}

JavaScript/jQuery (run on DOM ready):

$(".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);    
}

Here's a jsFiddle.

This is what the resulting selection looks like in Chrome:

How can I stop this happening, and just select the desired text?

解决方案

Replace your call to selectObjectText with:

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

The problem with textarea elements is that they do not hold their contents in DOM nodes. The text value is a property of the element. When you call range.selectNode, what happens is that the range is set so as to encompass the node you pass to the function and the children node of this node, but since a textarea does not store its text in children nodes, then you select only the textarea.

setSelectionRange works with the value of an input element so it does not suffer from this problem. You might want to check the compatibility matrix here to check which browsers support it.

这篇关于尝试选择用appendChild（）注入的节点时，如何防止Range.selectNode（）选择太多的DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！