Javascript 手动复制到剪贴板并点击

Question

我目前有以下代码。单击时，数据项会根据需要复制到剪贴板，但问题是当我尝试通过选择并手动复制来复制多个项目时，它只会复制已选择的第一个项目，而不是全部。

const tds = document.querySelectorAll("td");

tds.forEach(td => {
  td.onclick = function() {
    document.execCommand("copy");
    // ------- code added from here -------
    this.className = 'copied';
    var td = this;
    setTimeout(function() {
       td.className = '';
    }, 1000)
    // -------      up to here      -------
  }

  td.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", td.textContent);
      console.log(event.clipboardData.getData("text"))
    }
  });
})

td.copied:after {
content: "copied";
background-color: red;
padding: 5px;
display: block;
position: absolute;
}

<table><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>

例如，如果您选择所有 3 个数据项并按 ctrl-c 或右键单击并复制，它只会复制所选的第一个项目。

虽然仍然保持点击复制，但可以在代码中更改某些内容以解决此问题，或者可以打开或关闭复选框/按钮以启用/禁用此功能以允许复制多个项目是最好的如何做到这一点？

首选不使用 jQuery 的解决方案。

Answer 1

在您的代码中这一行:

event.clipboardData.setData("text/plain", td.textContent);

更改 td.textContent，它只捕获那个点击的 TD，然后将此 TD 的文本复制到 window.getSelection()。此函数将捕获所有选定的数据，然后复制所有数据。

const tds = document.querySelectorAll("td");

tds.forEach(td => {
  td.onclick = function() {
    document.execCommand("copy");
    // ------- code added from here -------
    this.className = 'copied';
    var td = this;
    setTimeout(function() {
       td.className = '';
    }, 1000)
    // -------      up to here      -------
  }

  td.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", window.getSelection());
      console.log(event.clipboardData.getData("text"))
    }
  });
})

但是现在，您必须首先选择要复制的数据。您可以在这里尝试:https://jsfiddle.net/0h25dc7z

当然方法有很多种，怎么实现你想要的，window.getSelection()只是其中一种。