单击 span 时，如何将 for-each 循环中的文本复制到剪贴板？答案

【问题标题】：How to copy text, which is in a for-each loop, to clipboard when span is clicked?单击 span 时，如何将 for-each 循环中的文本复制到剪贴板？
【发布时间】：2019-07-27 00:39:40
【问题描述】：

我试图将数据复制到剪贴板，我希望这样每当用户点击包含文本的跨度时，它匹配的特定文本就会被复制到剪贴板。

 <tbody data-bind="foreach: closedAccounts">
 <span id="a"  data-bind="text: $data.accountNo"  onclick="copyDivToClipboard()"
 data-toggle="tooltip" title="Copy to clipboard">
 </span></tbody>

javascript函数

   function copyDivToClipboard() {

        var range = document.createRange();
        range.selectNode(document.getElementById("a"));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        console.log(range);
}

我无法复制与 span 匹配的特定文本，因为该文本没有特定的 id 或类名，因为它只是在循环时打印文本，所以它们都有相同的 id。那么我如何指定具有该跨度的特定文本，因为跨度可以按任何顺序按下？

【问题讨论】：

标签： javascript asp.net-mvc clipboard-interaction

【解决方案1】：

您需要使用this 关键字。将this 传递到您的 onclick 函数中，您将能够访问被点击的元素及其在函数内的所有属性。

<span id="a"  data-bind="text: someText"  onclick="copyDivToClipboard(this)"
 data-toggle="tooltip" title="Copy to clipboard">
        More Text
 </span>

<script>
function copyDivToClipboard(clickedspan) {
        console.log(clickedspan)//the html element being clicked
        console.log(clickedspan.innerText)//your text here
        console.log(clickedspan.dataset.bind)//your data attribute
}
</script>

【讨论】：

谢谢 Cobly Boren，它在控制台中显示每个项目的数据，但它只打印第一个元素
@ali，我不明白你的意思。您确实意识到您不能在所有元素上都具有相同的 Id，然后通过 Id 正确获取元素？你需要使用“这个”。如果您仍然遇到问题，您应该使用您现在使用的代码更新您的问题。
Cobly Boren，我需要的是，当我按下 foreach 下的数据时，此数据复制到剪贴板，您的解决方案是仅复制第一个数据，例如，如果我在下选择第二个数据foreach 它复制第一个数据

【解决方案2】：

您可以通过将this 参数传递给copyDivToClipboard 来执行此操作，这样您就可以在函数中处理您点击的项目，然后您的跨度是否具有相同的ID 不是计量天气。

<tbody data-bind="foreach: closedAccounts">
     <span id="a"  data-bind="text: $data.accountNo"  onclick="copyDivToClipboard(this)"
       data-toggle="tooltip" title="Copy to clipboard">
     </span>
</tbody>

<script>
    function copyDivToClipboard(clickedspan) {
        const el = document.createElement('textarea');
        el.value = clickedspan.innerText;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        alert("Text copied to clipboard: " + clickedspan.innerText);
    }
</script>

此答案是根据您在问题中指定的要求。如果您想实现其他目标，请编辑您的问题。

【讨论】：

这几乎就是我的答案