JavaScript实现内容复制到剪贴板

方式一、将内容复制到剪切板的方法因浏览器而异。以下是一种可行的解决方案，它使用了 Clipboard API，并提供了一些浏览器兼容性处理：

这里的代码将创建一个包含指定链接的临时文本区域元素，并将其添加到当前文档的主体中。然后，它会选择并复制该元素中的文本，使用 document.execCommand("copy") 命令将其复制到剪贴板中。最后，代码将删除临时元素。

请注意，该方法需要用户在浏览器中允许访问剪贴板。某些浏览器可能会阻止这种访问方式，因此不能依赖它。

// 获取要复制到剪切板的链接
const link = "https://www.example.com";

// 创建临时 <textarea> 元素，将链接写入其中
const textArea = document.createElement("textarea");
textArea.value = link;
document.body.appendChild(textArea);

// 选中并复制链接
textArea.select();
document.execCommand("copy");

// 将 <textarea> 元素删除
document.body.removeChild(textArea);

方式二、将内容复制到剪切板的方法因浏览器而异。以下是一种可行的解决方案，它使用了 Clipboard API，并提供了一些浏览器兼容性处理：

这里，我们首先检查浏览器是否支持 Clipboard API。如果当前浏览器不支持该API，则使用传统的 document.execCommand("copy") 方法来复制文本。对于那些支持 Clipboard API 的浏览器，我们会通过调用 navigator.clipboard.writeText(text) 方法来复制文本到剪贴板。这种方式比较繁琐，但能够在大多数浏览器中提供兼容性保障。

function copyToClipboard(text) {
  // 检查浏览器是否支持 Clipboard API
  if (!navigator.clipboard) {
    // 如果不支持，则使用传统的 document.execCommand("copy") 方式
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    return;
  }

  // 使用 Clipboard API 复制内容到剪切板
  navigator.clipboard.writeText(text).then(
    function() {
      console.log("复制成功");
    },
    function() {
      console.log("复制失败");
    }
  );
}

// 调用 copyToClipboard 函数，传入要复制的文本作为参数
copyToClipboard("这是一段需要复制到剪贴板的文本");

JavaScript实现内容复制到剪贴板

猜你喜欢