编程语言
首页 > 编程语言> > Javascript-angular js从范围div和span元素中选择所有文本,以便用户复制所选文本

Javascript-angular js从范围div和span元素中选择所有文本,以便用户复制所选文本

作者:互联网

我正在尝试创建一些文本的全选功能(以角度js表示),其显示格式类似于以下结构.选择所有文本后,用户可以按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>

将有一个按钮,通过单击它,需要选择出现在容器div内的所有文本.我搜索了许多示例,到目前为止,我发现的所有示例都提供了有关如何从文本区域或文本框中选择文本的解决方案.我想找出如何从此类HTML元素中选择所有文本.

解决方法:

看看这个答案:https://stackoverflow.com/a/6150060/2363552

这是它的工作原理:Plnkr example

Java脚本

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>

标签:angularjs,jqlite,css,html,javascript
来源: https://codeday.me/bug/20191027/1948427.html