现代标准方式是使用 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:
立即学习“Java免费学习笔记(深入)”;
-
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,选中后执行),但该方式已被标记为废弃










