如何用 JavaScript 复制到剪贴板

在开发网页应用时，很多时候都会遇到需要动态复制文本到剪贴板的需求。JavaScript 提供了几种不同的方法来实现这一功能，本文将详细介绍这些方法及其使用场景。

浏览器提供的三种主要 API

目前，主流浏览器提供了以下三种主要的 API 来复制文本到剪贴板：

1. 异步剪贴板 API

异步剪贴板 API 是最现代化的方案，使用 navigator.clipboard.writeText() 方法。

特点：

• 哈 Chrome 66 (2018 年 3 月发布) 起支持。
• API 是异步的，使用 JavaScript 的 Promise，安全提示不会中断页面中的 JavaScript。
• 可以直接将变量中的文本复制到剪贴板。
• 仅支持在通过 HTTPS 服务的页面上使用。
• 在 Chrome 66 中，即使页面在后台标签页面，也可以复制到剪贴板而不需要权限提示。

使用示例：

navigator.clipboard.writeText("要复制的文本").then(() => {
   
  console.log('复制成功！');
}).catch(err => {
   
  console.error('复制失败：', err);
});

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

特点：

• 大多数浏览器在 2015 年 4 月前后开始支持。
• 访问是同步的，会中断页面中的 JavaScript，直到完成，包括用户交互的安全提示。
• 文本从 DOM 中读取并放入剪贴板。
• 测试期间（2015 年 4 月左右）只有 Internet Explorer 显示权限提示时在写入剪贴板。

虽然已经被弃用，但为了兼容性，有时仍会用到此方法。使用示例：

function fallbackCopyTextToClipboard(text) {
   
  var textArea = document.createElement(