JavaScript剪贴板API需在HTTPS或localhost安全上下文中，由用户手势触发；writeText()和readText()均返回Promise，支持文本读写，Chrome 115+实验性支持图片写入，Safari读取受限，建议检查权限并兼容降级。
JavaScript 剪贴板 API（navigator.clipboard）可以安全地读写系统剪贴板，但必须在安全上下文（HTTPS 或 localhost）中运行，且需要用户主动触发（比如点击事件），不能自动执行。
写入文本到剪贴板
调用 clipboard.writeText() 方法，返回 Promise：
成功时 resolve，无返回值 失败时 reject（如权限被拒、非用户手势触发）
示例：
button.addEventListener('click', async () => { try { await navigator.clipboard.writeText('Hello, world!'); console.log('已复制到剪贴板'); } catch (err) { console.error('复制失败:', err); }});
读取文本内容
使用 clipboard.readText()，同样返回 Promise：
立即学习“Java免费学习笔记（深入）”；
仅支持纯文本，不支持 HTML 或富文本（除非手动解析） 部分浏览器（如 Safari）可能限制读取，需明确用户授权
示例：
button.addEventListener('click', async () => { try { const text = await navigator.clipboard.readText(); console.log('剪贴板内容:', text); } catch (err) { console.error('读取失败:', err); }});
处理权限与兼容性
不是所有浏览器都默认允许剪贴板访问，建议检查权限状态：
用 navigator.permissions.query({ name: 'clipboard-read' }) 或 'clipboard-write' 查询 Chrome/Edge 94+ 支持无提示写入（只要在用户手势内）；读取仍可能弹权限请求 Safari 对 readText() 限制较严，有时会静默拒绝 旧版可用 document.execCommand('copy') 降级（需配合 操作，已废弃但仍有兼容价值）
写入图片（实验性支持）
Chrome 115+ 支持 clipboard.write() 写入图片 Blob：
需构造 ClipboardItem，传入 { 'image/png': blob } 等格式 目前仅限 PNG/JPEG，且需用户手势 + 安全上下文 暂不推荐生产环境依赖，可用作增强体验
示例片段：
const blob = await fetch('logo.png').then(r => r.blob());await navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob })]);
基本上就这些。核心原则：用户触发、HTTPS、处理 Promise 异常、兼顾老浏览器可选降级。不复杂但容易忽略上下文和权限细节。
以上就是javascript剪贴板API如何使用_如何读取和写入剪贴板？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543544.html
微信扫一扫 
支付宝扫一扫 
