点击

Question

我正在尝试向以下代码添加一个小弹出工具提示，以显示单击该元素时文本已成功复制到剪贴板。我希望工具提示弹出一个单击或触摸“复制”手机的情况下一秒钟，然后消失，直到另一个项目被复制。

代码如下：

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

tds.forEach(td => {
  td.onclick = function() {
    document.execCommand("copy");
  }

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

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

Answer 1

这是一个不使用jQuery的解决方案（我假设你不使用它，因为它没有出现在你向我们展示的代码中）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

点击td然后一秒钟，添加copied类，其中:after伪元素充当您想要的弹出窗口