JavaScript剪贴板交互主要通过Clipboard API实现,需用户手势触发且要求HTTPS;writeText()和readText()用于纯文本读写,返回Promise;富文本或图片需用write()/read()配合ClipboardItem;现代浏览器广泛支持但存在兼容性差异。

JavaScript 中的剪贴板交互现在主要通过 Clipboard API 实现,它比旧的 document.execCommand('copy') 更安全、更可控,且无需依赖输入框或选中内容。核心是 navigator.clipboard 对象,但需注意权限和使用场景。
基础用法:复制文本到剪贴板
调用 navigator.clipboard.writeText() 即可写入纯文本。该方法返回 Promise,成功则无返回值,失败会抛出错误。
try {
await navigator.clipboard.writeText('Hello, Clipboard!');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
读取剪贴板中的文本
使用 navigator.clipboard.readText() 获取当前剪贴板文本内容,同样返回 Promise。
- 需要用户主动触发(如点击“粘贴”按钮),不能自动读取
- 部分浏览器(如 Safari)可能要求额外权限或仅支持安全上下文下的显式请求
- 注意:读取操作可能被用户拒绝,务必处理 Promise rejection
读写富文本或图片(进阶)
writeText() 和 readText() 只处理纯文本。如需复制 HTML、图片等,需用更底层的 write() 和 read() 方法。
立即学习“Java免费学习笔记(深入)”;
-
write()接收一个ClipboardItem数组,每个项可包含多种 MIME 类型数据(如'text/html'、'image/png') - 写入图片需先获取 Blob(例如从
导出),再构造ClipboardItem - 读取非文本内容需检查
types并调用getType()获取对应 Blob
权限与兼容性注意事项
Clipboard API 在现代浏览器中已广泛支持(Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+),但仍有细节差异:
- 首次调用读/写前,浏览器可能弹出权限提示(尤其在非安全上下文或跨源 iframe 中)
- Safari 对
read()的限制较严,建议优先使用readText()并降级处理 - 可提前检测支持性:
if ('clipboard' in navigator) - 对旧版浏览器,可保留
execCommand作为 fallback(需临时创建并选中)










