JavaScript如何实现剪切板操作_JavaScript如何复制文本到剪切板_技术教程

navigator.clipboard.writeText() 是现代浏览器推荐的剪切板复制方法，需 HTTPS/localhost 安全上下文及用户手势触发，返回 Promise，成功无返回值，失败抛错。

JavaScript 可以通过 navigator.clipboard API 实现剪切板的复制操作，这是现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）原生支持的标准方式，安全、简洁、无需依赖 Flash 或 document.execCommand。

使用 navigator.clipboard.writeText() 复制文本

这是最常用、推荐的方式。它返回一个 Promise，成功时无返回值，失败时抛出错误。

确保页面是安全上下文（即通过 https:// 或 localhost 访问），否则 API 不可用
必须由用户手势（如点击、键盘事件）触发，不能在页面加载或定时器中直接调用，否则会被浏览器拒绝
示例代码：

document.getElementById('copyBtn').addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Hello, world!');
    console.log('文本已复制到剪切板');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

兼容旧版浏览器（可选降级方案）

若需支持较老版本 Chrome/Firefox（document.execCommand('copy')，但该方法已废弃，且限制更多：

需将文本放入或元素并选中其内容
元素必须在 DOM 中且可见（不可 display:none 或 visibility:hidden）
同样要求用户手势触发

function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
    console.log('已使用 execCommand 复制');
  } catch (err) {
    console.error('execCommand 复制失败', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

检查剪切板权限与状态

可通过 navigator.permissions.query() 主动检查是否拥有写入权限（尤其在 Safari 等严格策略浏览器中）：

权限状态可能为 'granted'、'denied' 或 'prompt'
首次调用 writeText 时浏览器通常会自动请求权限，无需提前申请
如需提前判断，可这样检查：

async function checkClipboardPermission() {
  if ('permissions' in navigator) {
    const result = await navigator.permissions.query({ name: 'clipboard-write' });
    console.log('剪切板写入权限:', result.state); // 'granted', 'prompt', 'denied'
  }
}

复制富文本或 HTML（进阶用法）

writeText 仅支持纯文本。如需复制带格式的 HTML 内容（如从编辑器复制带样式的段落），需使用 clipboard.write() 配合 ClipboardItem：

目前兼容性有限（Chrome 84+ 支持较好，Firefox/Safari 支持不完整）
需构造 Blob 并指定类型为 'text/html'
简单示例：

async function copyHtml(htmlString) {
  try {
    const htmlBlob = new Blob([htmlString], { type: 'text/html' });
    const item = new ClipboardItem({ 'text/html': htmlBlob });
    await navigator.clipboard.write([item]);
  } catch (err) {
    console.error('HTML 复制失败:', err);
  }
}