JavaScript 通过 navigator.clipboard 安全异步读写剪贴板，需 HTTPS 环境且由用户手势触发；writeText() 和 readText() 分别用于写入/读取文本，read()/write() 支持富文本与图片但兼容性有限；旧浏览器可降级使用隐藏 textarea + execCommand('copy')。

JavaScript 可以通过 Clipboard API（即 navigator.clipboard）安全、异步地读写系统剪贴板，但必须满足两个前提：页面运行在 HTTPS 环境下，且操作由**用户手势触发**（如 click、tap、keydown 等），不能在页面加载或定时器中直接调用。

写入文本到剪贴板

使用 navigator.clipboard.writeText() 方法，返回 Promise：

• 成功时 resolve，失败时 reject（例如用户拒绝权限、非安全上下文或无用户交互）
• 推荐在按钮点击事件中调用，避免被浏览器拦截

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）：

• 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，注意权限与交互时机，旧环境再兜底。不复杂但容易忽略用户触发条件和协议限制。