How to copy text from div to clipboard
Both will work like a charm :),
JAVASCRIPT:
function CopyToClipboard(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select().createTextRange(); document.execCommand("copy"); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); document.execCommand("copy"); alert("text copied") }}
Also in HTML,
<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button> <div id="div1" >Text To Copy </div> <textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea> Here is a snippet.
function CopyToClipboard(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select().createTextRange(); document.execCommand("copy"); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); document.execCommand("copy"); alert("text copied, copy in the text-area") } } <button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button> <div id="div1">Text To Copy </div> <textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea> I tried the solution suggested above. But it was not cross-browser enough. I really needed 11 to work. After trying I got to:
<html> <body> <div id="a" onclick="copyDivToClipboard()"> Click to copy </div> <script> function copyDivToClipboard() { var range = document.createRange(); range.selectNode(document.getElementById("a")); window.getSelection().removeAllRanges(); // clear current selection window.getSelection().addRange(range); // to select text document.execCommand("copy"); window.getSelection().removeAllRanges();// to deselect } </script> </body> </html> Tested with Firefox 64, Chrome 71, Opera 57, i.e. 11 (11.472.17134.0), edge (EdgeHTML 17.17134)
Update March 27, 2019.
For some reason, document.createRange() didn't work with ie11 before. But now it returns the Range object correctly. So it's better to use this than document.getSelection().getRangeAt(0) .
The accepted answer does not work if you have several items to copy, and each of them has a separate "Copy to clipboard" button. After pressing one button, the rest will not work.
To make them work, I added the code to the accepted response function to clear the selected texts before doing a new one:
function CopyToClipboard(containerid) { if (window.getSelection) { if (window.getSelection().empty) { // Chrome window.getSelection().empty(); } else if (window.getSelection().removeAllRanges) { // Firefox window.getSelection().removeAllRanges(); } } else if (document.selection) { // IE? document.selection.empty(); } if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select().createTextRange(); document.execCommand("copy"); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); document.execCommand("copy"); } } Adding a link as an answer to draw more attention to Aaron Laver's comment below the first answer.
It works like a charm - http://clipboardjs.com . Just add the clipboard.js or min file. At startup, use the class for which you want to click the html component, and simply pass the identifier of the component with the content to be copied, by clicking the element.
This solution adds deselection of text after copying to the clipboard:
function copyDivToClipboard(elem) { var range = document.createRange(); range.selectNode(document.getElementById(elem)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); } I get selectNode () parameter 1 does not have a node type error.
changed the code to this and it works. (for chrome)
function copy_data(containerid) { var range = document.createRange(); range.selectNode(containerid); //changed here window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); alert("data copied"); } <div id="select_txt">This will be copied to clipboard!</div> <button type="button" onclick="copy_data(select_txt)">copy</button> <br> <hr> <p>Try paste it here after copying</p> <textarea></textarea>