反应复制到剪贴板 - Javascript

当我们需要将一些内容（如文本、链接等）复制到剪贴板时，可以使用Javascript代码实现。

实现方法

我们可以使用document.execCommand()方法将所需的内容复制到剪贴板中。该方法接收两个参数，第一个是命令名称（此处为“copy”），第二个是携带的数据（此处为需要复制的文本）。

function copyToClipboard(text) {
  const tempInput = document.createElement("input");

  // 将 text 内容设置到 input 标签中
  tempInput.value = text;

  // 将 input 标签追加到 body 中
  document.body.appendChild(tempInput);

  // 选中 input 标签中的内容
  tempInput.select();

  // 执行复制命令
  document.execCommand("copy");

  // 删除临时 input 标签
  document.body.removeChild(tempInput);

  console.log("已复制到剪贴板");
}

以上代码将文本内容设置到input标签中，并将其添加到DOM中。接着，我们选中这个input中的内容，将其复制到剪贴板中，最后再将这个input标签从DOM中删除。

如果您需要复制的内容是位于某个DOM节点的innerText属性中，可以这样实现：

function copyFromNode(node) {
    const range = document.createRange();
    range.selectNodeContents(node);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("copy");
    console.log("已复制到剪贴板");
}

以上代码使用document.createRange()方法创建一段Range并选中指定节点（这里是传入的node参数），接着使用window.getSelection()方法获取选中的内容，将其复制到剪贴板中，最后输出提示信息。

注意事项

• 浏览器兼容性：该方法在现代浏览器（如Chrome、Firefox、Safari等）中均可使用，但在IE浏览器中不被支持。
• 安全问题：根据浏览器的安全策略，document.execCommand()方法必须在同一事件处理器中被调用，否则将会触发安全异常。因此，建议将以上代码封装为函数，由单个事件处理器进行调用。

参考资料

• MDN - document.execCommand()