JavaScript剪贴板API使用详解
2026-01-25 15:41:38
0浏览
收藏
学习文章要努力，但是不要急！今天的这篇文章《JavaScript剪贴板API使用教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！
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：
- 仅支持纯文本，不支持 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')降级（需配合