• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

402
Views
How to copy in clipboard only one DIV from multiple divs using javascript

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>
over 3 years ago · Santiago Trujillo
4 answers
Answer question

0

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>

over 3 years ago · Santiago Trujillo Report

0

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>

over 3 years ago · Santiago Trujillo Report

0

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> 
over 3 years ago · Santiago Trujillo Report

0

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>

over 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error