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。
- 需要用户主动触发(如点击“粘贴”按钮),不能自动执行
- 部分浏览器(如 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')(已废弃但仍有兼容性),需配合
和 focus/select 操作
注意事项与常见问题
剪贴板操作不是总能成功,需合理处理异常并提供用户反馈。
- 用户可能拒绝权限,或在非安全上下文(HTTP 非 localhost)中调用失败
- 移动端 Safari 对 readText 支持有限,iOS 16.4+ 才全面支持
- 避免频繁或静默写入剪贴板,影响用户体验,应明确提示操作结果(如“已复制” Toast)









