使用 jquery 单击时将元素内容复制到剪贴板

Question

是否可以通过单击其他元素将元素内容复制到剪贴板？

我看到了很多相关问题，但我不喜欢使用函数的方法。

因为数据来自数据库。

这是我的示例代码。

$(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>

Answer 1

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" />

Answer 2

您没有使用 .click 而是使用 click 作为元素。您可以通过查看 jquery 的 init 方法无法根据条件找到元素来对此进行调试。

$(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>

使用 jquery 单击时将元素内容复制到剪贴板

Copy element content to clipboard on click using jquery

clipboard

jquery