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

在 JavaScript 中复制到剪贴板

概述

要在 JavaScript 中将文本复制到剪贴板，有以下三种方法钥匙API：

1. 异步剪贴板 API (navigator.clipboard.writeText)：

   • Chrome 66 及更高版本的主要 API（2018 年 3 月） ).
   • 使用 JavaScript Promises 进行异步访问，确保流畅的用户体验。
   • 可以直接从变量复制文本。
   • 需要 HTTPS 才能访问

2. document.execCommand('copy'):

   • 已弃用，但得到广泛支持。
   • 同步访问，停止 JavaScript 执行，直到复制完成完成。
   • 从 DOM 读取文本并将其放置在剪贴板上。
   • 在控制台测试期间可能会显示安全提示。

3. 覆盖副本事件：

   • 允许通过任何复制事件修改剪贴板数据。
   • 支持纯文本以外的多种数据格式。

发展注意

• 剪贴板相关命令可能无法在控制台测试中工作。通常需要页面交互或活动选项卡。
• 由于浏览器弃用 IFRAME 中的跨源权限，嵌入式演示可能无法在 Chrome 和 Microsoft Edge 等浏览器中运行。

Async Plus Fallback

将异步剪贴板 API 与后备相结合document.execCommand('copy') 确保广泛的浏览器支持：

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中文网其他相关文章！