JavaScript可通过navigator.clipboard实现安全复制粘贴，需HTTPS/localhost环境及用户手势触发；writeText()和readText()分别处理纯文本读写，返回Promise；权限需permissions.query检测，旧浏览器可降级execCommand；富文本或图片需write()配合ClipboardItem，兼容性有限。
JavaScript可以通过现代剪贴板API（navigator.clipboard）实现安全、直接的复制与粘贴操作，无需依赖老旧的document.execCommand或隐藏文本域等兼容方案。关键前提是页面必须运行在安全上下文（HTTPS 或 localhost），且需用户主动触发（如点击事件中调用），否则浏览器会拒绝访问剪贴板。
复制文本到剪贴板
使用navigator.clipboard.writeText()可将字符串写入系统剪贴板：
- 该方法返回 Promise，成功时无返回值，失败时抛出错误（如权限被拒、非安全上下文、非用户手势触发）
- 务必在用户交互事件（如
click、keydown）中调用，避免被浏览器拦截 - 示例：button.addEventListener('click', () => navigator.clipboard.writeText('Hello World').then(() => console.log('已复制')).catch(err => console.error('复制失败:', err)));
从剪贴板读取纯文本
使用navigator.clipboard.readText()可获取当前剪贴板中的文本内容：
- 同样返回 Promise，仅支持读取纯文本（不支持 HTML 或富文本格式）
- 需用户主动触发，且部分浏览器（如 Safari）可能限制读取权限，建议先检查
navigator.clipboard是否存在 - 示例：button.addEventListener('click', () => navigator.clipboard.readText().then(text => console.log('粘贴内容:', text)).catch(err => console.error('读取失败:', err)));
处理权限与兼容性
剪贴板操作受权限控制，应主动检测并引导用户授权：
立即学习“Java免费学习笔记（深入）”；
- 可通过
navigator.permissions.query({ name: 'clipboard-write' })和{ name: 'clipboard-read' }分别检查写/读权限状态 - 对旧版浏览器（如 IE、部分安卓 WebView），可降级使用
document.execCommand('copy')配合临时<textarea></textarea>元素，但该方式已被废弃，仅作兜底 - 注意：移动端部分浏览器（如 iOS Safari）对
readText()支持有限，建议优先使用复制功能，粘贴操作尽量由原生输入框完成
复制富文本或图片（进阶）
若需复制 HTML、图片等非纯文本内容，需使用navigator.clipboard.write()配合ClipboardItem：
- 支持传入
ClipboardItem数组，每个项可包含多种 MIME 类型（如'text/html'、'image/png'） - 图片需为
Blob对象；HTML 字符串需设置对应类型，并确保格式合法 - 兼容性较低（Chrome 66+、Edge 79+、Firefox 116+ 支持较好），生产环境建议先判断 API 可用性再调用
