Question

我有三个班级相同的班级

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

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

即如果我单击第一个跨度，则“ Atul”将被复制到剪贴板中。

Answer 1

您无法选择span，因此必须使用跨度的textarea创建一个临时textContent才能执行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

您可以尝试this codepen使用不同的布局

OR

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

单击的项目复制到剪贴板

3 个答案: