可重复使用的复制到剪贴板功能

Question

我创建了一个可重复使用的复制函数，它适用于具有特定 class 的任何输入字段，但我能够在输入字段中传递值的唯一方法是直接添加 onclick 事件到输入字段 onclick="copyIt(this)"，这显然不理想。

当我尝试将文本字段的值传递给函数时出现错误：copyIt(e.target.value); 我应该能够解决这个问题，但我没有运气。 obviously/apparently 我不明白需要如何格式化该值才能使其正常工作，但这就是阻碍。任何见解将不胜感激！

const copyIt = function (text) {
  text.select();
  console.log("Copied to clipboard");
  document.execCommand("copy");
}

document.querySelectorAll(".copier").forEach((copied) => {
  copied.addEventListener("click", (e) => {
    console.log(e.target.value, "event listener attached");
    copyIt(e.target.value);
  });
});

https://codepen.io/NoahBoddy/pen/MWJmgQz

Answer 1

您的问题是 text.select() 期望 select 一个 NodeElement 而您传递的是文本本身。你不能那样做，所以我已经调整了你的代码来工作。

对跨 NodeElements 的 forEach 的赞誉...我完成时间最长的 Array.from(NodeList)，这种方法带来了一些另类的见解。谢谢

const copyIt = function (nodeElement) {
  nodeElement.select();
  document.execCommand("copy");
}

document.querySelectorAll(".copier").forEach((nodeElement) => {
  nodeElement.addEventListener("click", () => {
    copyIt(nodeElement)
  });
});

可重复使用的复制到剪贴板功能

Reusable Copy To Clipboard Function

javascript

clipboard

copy