How to copy text from a div to clipboard. What I can do then only get one data in clipboard .
<div id="div1">Text To Copy</div>
<div id="div2">Text To Copy</div>
<div id="div3">Text To Copy</div>
<div id="div4">Text To Copy</div>
<script>
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("e.target(id)"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
}
</script>
You can try it this way. Call the function on onclick event
function copyDivToClipboard(id) {
var range = document.createRange();
range.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
alert("Text Copied: "+range);
}<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>You can also do this if you are using jQuery
$("div").click(function(e){
var range = document.createRange();
range.selectNode(document.getElementById(e.target.id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
console.log("Text Copied: "+range);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">Text To Copy1</div>
<div id="div2">Text To Copy2</div>
<div id="div3">Text To Copy3</div>
<div id="div4">Text To Copy4</div>I think shirshak007 answered. But I would like to share an alternative code snippet to it.
<script>
function CopyToClipboard(id) {
var copyBoxElement = document.getElementById(id);
copyBoxElement.contenteditable = true;
copyBoxElement.focus();
document.execCommand("copy");
copyBoxElement.contenteditable = false;
alert("Text has been copied : " + copyBoxElement.innerHTML)
}
</script>
<div id="div1" onclick="CopyToClipboard(this.id)">Codebay</div>
<div id="div2" onclick="CopyToClipboard(this.id)">Software</div>
I was also stuck in same kind of problem. I found the solution.
If you want to show the message in the same div do this, just try
function copyDivToClipboard(id) {
var range = document.createRange();
oldvalue = document.getElementById(id).innerHTML;
range.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
document.getElementById(id).innerHTML = "Text Copied";
setTimeout(function(){document.getElementById(id).innerHTML = oldvalue }, 2000); //you can change the time
}<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>