JavaScript可通过navigator.clipboard API读写剪贴板，需用户手势触发、安全上下文（HTTPS/localhost），writeText()和readText()均返回Promise，须处理兼容性、权限及异常。

JavaScript可以通过浏览器提供的 navigator.clipboard API 实现剪贴板的读写操作，但需注意权限、安全上下文和浏览器兼容性。

写入剪贴板（复制文本）

使用 clipboard.writeText() 可将字符串写入系统剪贴板。该方法返回 Promise，成功时无返回值，失败时抛出错误。

• 必须在用户手势触发的上下文中调用（如 click、keydown 事件），否则可能被浏览器拒绝
• 页面需运行在 HTTPS 或 localhost 环境下（安全上下文要求）
• 示例：button.addEventListener('click', () => navigator.clipboard.writeText('Hello')).catch(err => console.error('复制失败:', err));

读取剪贴板（粘贴文本）

使用 clipboard.readText() 可获取剪贴板中的纯文本内容，同样返回 Promise。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

• 需要用户主动触发（如点击“粘贴”按钮），不能自动执行
• 部分浏览器（如 Safari）对 readText 的支持较新，建议检查兼容性或降级处理
• 示例：button.addEventListener('click', () => navigator.clipboard.readText().then(text => console.log('粘贴内容:', text)));

权限与兼容性处理

现代浏览器要求显式请求剪贴板权限，可通过 navigator.permissions.query() 检查状态，并引导用户授权。

立即学习“Java免费学习笔记（深入）”；

• 检测 API 是否可用：if ('clipboard' in navigator)
• 检查权限：navigator.permissions.query({name: 'clipboard-write'})（写）或 clipboard-read（读）
• 不支持时可回退到 document.execCommand('copy')（已废弃但仍有兼容性），需配合 <textarea></textarea> 和 focus/select 操作

注意事项与常见问题

剪贴板操作不是总能成功，需合理处理异常并提供用户反馈。

• 用户可能拒绝权限，或在非安全上下文（HTTP 非 localhost）中调用失败
• 移动端 Safari 对 readText 支持有限，iOS 16.4+ 才全面支持
• 避免频繁或静默写入剪贴板，影响用户体验，应明确提示操作结果（如“已复制” Toast）