单击的项目复制到剪贴板

Question

我有三个具有相同类的跨度

<div>
<span class="textValue">Atul</span>
<span class="textValue">Kumar</span>
<span class="textValue">Rajput</span>
</div>

我只想，如果我点击任何一个跨度，那么该跨度的值将被复制到剪贴板。

即，如果我点击第一个跨度，那么"Atul"将被复制到剪贴板中。

Answer 1

您不能选择span，因此您必须使用跨度的textContent创建一个临时textarea来执行copy命令。

<div>
<span class="textValue" onClick="copy(this)">Atul</span>
<span class="textValue" onClick="copy(this)">Kumar</span>
<span class="textValue" onClick="copy(this)">Rajput</span>
</div>
<p/>
Try to paste the text that you copied:
<br/>
<input type="text"/>
<p/>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function copy(el){
var copyText = el.textContent;
var textArea = document.createElement("textarea");
textArea.value =  copyText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
result.innerHTML = "Copied text: "+copyText;
}
</script>

Answer 2

你可以试试这个

$(".textValue").click(function () {
var spanVal = $(this).text();
document.execCommand("copy");
alert(spanVal);
});

Answer 3

您可以为不同布局的尝试此代码笔

或

此Codepen

这边

const span = document.querySelector("span");
var result = document.getElementById("result");
function copy(el){
var copyText = el.textContent;
var textArea = document.createElement("textarea");
textArea.value =  copyText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
result.innerHTML = "Copied text: "+copyText;
}
</script>

<div>
<span class="textValue"  onClick="copy(this)">Atul</span>
<span class="textValue"  onClick="copy(this)">Kumar</span>
<span class="textValue"  onClick="copy(this)">Rajput</span>
</div>
<span id="result"></span>