[英]angular js select all text from a range div and span elements to let user copy the selected text
I am trying to create a select all
functionality (in angular js) of some text which appears in a format similar to the structure given below. 我正在尝试创建一些文本的
select all
功能(在角度js中),其出现的格式类似于下面给出的结构。 When all text is selected, then user could hit ctrl + c
to copy the same. 选择所有文本后,用户可以按
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>
There will be a button, by click on it, all the text appearing inside the container
div is required to be selected. 将有一个按钮,通过单击它,需要选择
container
div中出现的所有文本。 I have searched many examples, so far all the examples I found is giving solutions on how to select text from a textarea or textbox. 我搜索了很多例子,到目前为止,我找到的所有例子都提供了如何从textarea或文本框中选择文本的解决方案。 I wanted to find out how do I select all text from such range of html elelments.
我想知道如何从这样的html元素范围中选择所有文本。
Check out this answer: https://stackoverflow.com/a/6150060/2363552 看看这个答案: https : //stackoverflow.com/a/6150060/2363552
Here is a plnkr of it working: Plnkr example 以下是它的工作原理 : Plnkr示例
Javascript 使用Javascript
function selectElementContents(el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
HTML 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.