Cómo copiar texto de un div al portapapeles. Lo que puedo hacer entonces solo es obtener un dato en el portapapeles.
<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>Puedes intentarlo de esta manera. Llame a la función en el evento onclick
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>También puede hacer esto si está usando 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>Creo que shirshak007 respondió. Pero me gustaría compartir un fragmento de código alternativo.
<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>También estaba atrapado en el mismo tipo de problema. Encontré la solución. Si desea mostrar el message en el mismo div , haga esto, solo intente
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>