17370845950

现代标准方式是使用 Clipboard API，它提供异步、基于 Promise 的接口，需用户交互触发且仅在安全上下文中可用；支持 writeText/readText 处理文本，write/read 操作富文本或图片，并受权限与浏览器兼容性限制。

JavaScript 中实现复制粘贴，现代标准方式是使用 Clipboard API，它提供异步、基于 Promise 的接口，取代了过去依赖 document.execCommand("copy") 的老旧方法。该 API 需要用户交互（如点击）触发，且仅在安全上下文（HTTPS 或 localhost）中可用。

复制文本内容

调用 navigator.clipboard.writeText() 可将字符串写入系统剪贴板：

• 必须在用户手势（如 click、keydown）回调中调用，否则会被浏览器拒绝
• 返回 Promise，成功时无返回值，失败时抛出异常（如用户拒绝权限、页面非安全上下文）
• 示例：button.addEventListener('click', () => { navigator.clipboard.writeText('Hello World').then(() => console.log('已复制')).catch(err => console.error('复制失败:', err)); });

读取剪贴板文本

用 navigator.clipboard.readText() 获取当前剪贴板中的纯文本：

• 同样需要用户交互触发，且部分浏览器（如 Safari）可能要求额外权限或限制后台读取
• 返回 Promise，解析为字符串；若剪贴板为空或含非文本内容（如图片），会拒绝 Promise
• 注意：移动端某些浏览器对 readText() 支持有限，建议加 try/catch 并提供降级提示

处理富文本或二进制数据（如图片）

Clipboard API 还支持更复杂的数据类型，通过 write() 和 read() 方法操作 ClipboardItem：

• write() 接收 ClipboardItem 数组，可同时写入多种格式（如 text/plain + image/png）
• read() 返回 ClipboardItem 数组，需遍历其 types 并用 getType() 提取对应 blob
• 实际应用中，读取图片常用于“粘贴截图”功能，但需注意 MIME 类型兼容性和用户授权状态

权限与兼容性注意事项

Clipboard API 的行为受浏览器策略严格约束：

• 首次调用读/写方法时，浏览器可能弹出权限请求（clipboard-read 或 clipboard-write），用户可拒绝
• 可通过 navigator.permissions.query({ name: 'clipboard-write' }) 预检权限状态
• 兼容性方面：Chrome 66+、Firefox 63+、Edge 79+ 支持良好；Safari 13.1+ 支持 writeText 和 readText，但 read() 仍受限
• 旧版浏览器需回退到 execCommand 方案（创建临时 textarea，选中后执行），但该方式已被标记为废弃