JavaScript 通过 navigator.clipboard 安全异步读写剪贴板，需 HTTPS 环境且由用户手势触发；writeText() 和 readText() 分别用于写入/读取文本，read()/write() 支持富文本与图片但兼容性有限；旧浏览器可降级使用隐藏 textarea + execCommand('copy')。
JavaScript 可以通过 Clipboard API（即 navigator.clipboard）安全、异步地读写系统剪贴板，但必须满足两个前提：页面运行在 HTTPS 环境下，且操作由**用户手势触发**（如 click、tap、keydown 等），不能在页面加载或定时器中直接调用。
写入文本到剪贴板
使用 navigator.clipboard.writeText() 方法，返回 Promise：
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, clipboard!');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
从剪贴板读取文本
用 navigator.clipboard.readText() 获取剪贴板中的纯文本内容：
- 需要用户主动触发（如点击“粘贴”按钮），不能自动读取
- 部分浏览器（如 Safari）可能要求额外权限或仅支持 HTTPS + 用户手势
- 若剪贴板为空或含非文本内容（如图片），会报错
document.getElementById('pasteBtn').addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
console.log('读取到:', text);
} catch (err) {
console.error('读取失败:', err);
}
});
读写富文本或图片（进阶）
Clipboard API 还支持 read() 和 write() 方法处理多种类型数据（如 HTML、图片 Blob）：
立即学习“Java免费学习笔记（深入）”；
-
read()返回ClipboardItem[]，需遍历检查types并调用getType()解析 -
write()接收ClipboardItem数组，可同时写入文本+HTML+图片等多格式 - 兼容性略低（Chrome 73+、Edge 79+、Firefox 122+ 支持较好；Safari 目前不支持
read()/write()）
兼容旧浏览器的降级方案
对于不支持 Clipboard API 的环境（如 IE 或老版 Safari），可用传统方法临时降级：
- 创建隐藏
或，设值后调用.select()+document.execCommand('copy') -
execCommand已废弃，仅作兼容用，且需元素已挂载 DOM 并可聚焦 - 读取剪贴板无法可靠降级，建议提示用户手动 Ctrl+V
基本上就这些。现代开发优先用 navigator.clipboard，注意权限与交互时机，旧环境再兜底。不复杂但容易忽略用户触发条件和协议限制。
