angular js select 范围 div 和 span 元素中的所有文本，让用户复制 selected 文本

Question

我正在尝试创建一些文本的 select all 功能（在 angular js 中），这些文本的格式类似于下面给出的结构。当所有文本都是 selected 时，用户可以点击 ctrl + c 复制相同的内容。

<div ="container">
 <div class="header">My example header</div>
  <div class="section1">
    <span>test content1</span>
    <span>test content2</span>
  </div>
  <div class="section2">
    <span>test content3</span>
    <span>test content4</span>
  </div>
  <div class="footer">footer content</div>
</div>

会有一个按钮，点击它，container div 中出现的所有文本都需要select编辑。我搜索了很多示例，到目前为止，我找到的所有示例都提供了有关如何 select 来自文本区域或文本框的文本的解决方案。我想知道如何 select 来自 html 元素范围内的所有文本。

Answer 1

查看此答案：

这是它的工作原理：Plnkr example

Javascript

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

HTML

<div id="container">
    <div class="header">My example header</div>
    <div class="section1">
        <span>test content1</span>
        <span>test content2</span>
    </div>
    <div class="section2">
        <span>test content3</span>
        <span>test content4</span>
    </div>
    <div class="footer">footer content</div>
</div>
<button type="button" onclick="selectElementContents(document.getElementById('container'))">Select Text</button>

angular js select 范围 div 和 span 元素中的所有文本，让用户复制 selected 文本

angular js select all text from a range div and span elements to let user copy the selected text

html

javascript

css

angularjs

jqlite