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

Question

有没有办法通过点击其他元素来复制到剪贴板元素内容？

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

因为数据来自数据库。

这是我的示例代码。

CODEPEN

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

$(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();
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;