如何使用 JavaScript 高效地将文本复制到剪贴板？

如何在 JavaScript 中复制到剪贴板

在 JavaScript 中，有多种方法将文本复制到剪贴板，具体取决于浏览器支持。

1。异步剪贴板 API [navigator.clipboard.writeText]

异步剪贴板 API 在 Chrome 66 中提供，提供对剪贴板的异步访问。它使用 JavaScript Promises，允许无缝执行，而无需用户提示中断页面。此外，文本可以直接从变量复制到剪贴板。请注意，它仅适用于通过 HTTPS 提供的页面。

2. document.execCommand('copy')（已弃用）

此方法是同步的，自 2015 年 4 月以来大多数浏览器都支持该方法。它会停止 JavaScript 执行，直到该过程完成，可能会向用户显示安全提示。文本从 DOM 复制到剪贴板。

一般开发注意事项：

• 在控制台中测试代码时，剪贴板命令可能不起作用。
• 页面必须处于活动状态（对于异步剪贴板 API）或需要用户交互（对于 document.execCommand('copy')）才能访问

后备方法：

为了确保跨浏览器兼容性，建议在异步剪贴板 API 中使用后备方法。这是一个示例：

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

以上是如何使用 JavaScript 高效地将文本复制到剪贴板？的详细内容。更多信息请关注PHP中文网其他相关文章！