Copy element content to clipboard on click using jquery

Question

Is there a way to copy to clipboard an element content by clicking on other element?

I saw lots of related problems, but I don't like the approach of using function.

since the data is from the database.

here's my sample code.

$(document).ready(function(){
  $(".click .copy").click(function(){
      $(this).closest("click").find("span").text();
      document.execCommand("Copy");
  });
 });

.click{
  padding: 10px;
}
.click .copy{
background-color: rgba(0,0,0,.8);
padding: 3px;
border-radius: 12px;
position: absolute;
margin-top: -2px;
width: 80px;
cursor: pointer;
color: #f7cc83;
display: none;
  text-align: center;
}
.click:hover .copy{
 display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 1</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 2</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 3</span>
</div>

possible duplicate of https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery ? — Neoares, Feb 22 '18 at 11:26
Possible duplicate of [Click button copy to clipboard using jQuery](https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery) — freedomn-m, Feb 22 '18 at 11:27
I saw that, but I don't like to use that approach, the answer is too complicated — , Feb 22 '18 at 11:29
Don't look at the accepted answer on that question, eg: https://stackoverflow.com/a/30905277/2181514 is only 1 or 2 lines than you have already. — freedomn-m, Feb 22 '18 at 11:30
Try this one, it's more specific to your issue: https://stackoverflow.com/a/45071478/2181514 — freedomn-m, Feb 22 '18 at 11:31

sss999 · Accepted Answer · 2018-02-22T16:52:44.943

You have not use .click and instead used click as the element. You could debug this by seeing the init method of the jquery not being able to find the element based on the criteria.

$(document).ready(function(){
    $(".click .copy").click(function(event){
    var $tempElement = $("<input>");
        $("body").append($tempElement);
        $tempElement.val($(this).closest(".click").find("span").text()).select();
        document.execCommand("Copy");
        $tempElement.remove();
    });
});

.click{
  padding: 10px;
}
.click .copy{
background-color: rgba(0,0,0,.8);
padding: 3px;
border-radius: 12px;
position: absolute;
margin-top: -2px;
width: 80px;
cursor: pointer;
color: #f7cc83;
display: none;
  text-align: center;
}
.click:hover .copy{
 display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 1</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 2</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 3</span>
</div>

score 5 · Answer 2 · answered Feb 22 '18 at 11:47

refer

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

In addition, you can also call it with a selector, like this: copyToClipboard($('.mydiv')); You don't need to pass the ID necessarily. — jobima, Oct 10 '18 at 07:43

Copy element content to clipboard on click using jquery

2 Answers2