1

我试图将数据复制到剪贴板，我想要它，以便每当用户单击包含文本的跨度时，它匹配的特定文本就会被复制到剪贴板。

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

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

4

2 回答 2

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>
于 2019-03-05T14:21:11.977 回答
1

你可以通过传递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>

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

于 2019-03-06T14:40:32.800 回答