Question

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

SELECT * 
FROM dogs
GROUP BY dogs.breed
HAVING COUNT(dogs.id) > 1 AND ?

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

例如，如果您选择所有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()只是其中之一。

Answer 2

感谢大家的答复，它为我指明了正确的方向。下面是我的解决方案。

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) {
// ------- solution code here -------        
      if(window.getSelection().toString() == "")
      {
      event.clipboardData.setData("text/plain", td.textContent);
      }
      else
      {
      event.clipboardData.setData("text/plain", window.getSelection());
      }
// ------- end of solution code -------
      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>

我添加了一个if语句来检查是否选择了任何内容，然后使用window.getSelection（）而不是td.textContent。

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

2 个答案: