How to copy in clipboard only one DIV from multiple divs using javascript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>