如何配置 Clipboard API 监听 copy/paste 事件并实现自定义剪贴板格式-js教程-PHP中文网

clipboard api 不提供监听机制，需用 copy/paste 事件配合 clipboarddata 实现多格式（含自定义 mime）剪贴板交互：copy 中 setdata 写入、paste 中 getdata 读取并阻止默认行为。

clipboard api 本身不提供“监听” copy/paste 事件的机制，它是一套主动读写剪贴板内容的异步接口（navigator.clipboard.read() / .write()），而真正的事件监听仍需依赖传统的 copy、cut、paste dom 事件。要实现自定义剪贴板格式（如 html、自定义 mime 类型、富文本结构），关键在于：在 copy 事件中用 event.clipboarddata 设置多格式数据；在 paste 事件中用 event.clipboarddata 读取所需格式，并阻止默认行为以避免浏览器自动粘贴原始内容。

1. 在 copy 事件中写入多格式内容（含自定义 MIME）

用户触发复制（Ctrl+C / 右键→复制 / document.execCommand('copy')）时，会触发 copy 事件。你可以在其中调用 event.preventDefault()，然后通过 event.clipboardData.setData() 写入多种格式，让目标应用（如支持 HTML 粘贴的编辑器）能按需选择最优格式：

必须阻止默认行为，否则浏览器会覆盖你写入的内容（尤其在 input/textarea 中）
支持标准 MIME 类型：text/plain、text/html、text/uri-list，也支持任意自定义类型（如 application/x-myapp-data），但只有同源且显式读取该类型的代码才能解析它
HTML 格式需是完整、合法的 HTML 片段（含或至少内容），部分应用（如 Word、Notion）会优先渲染它

示例：复制一段带样式的自定义卡片

document.addEventListener('copy', (event) => {
  const customData = JSON.stringify({ id: 'card-123', type: 'note', title: '会议纪要' });

  event.preventDefault();

  const clipboardData = event.clipboardData || window.clipboardData;
  if (clipboardData) {
    clipboardData.setData('text/plain', '会议纪要');
    clipboardData.setData('text/html', '<div style="color:#2563eb;font-weight:bold">? 会议纪要</div>');
    clipboardData.setData('application/x-myapp-card', customData);
  }
});

2. 在 paste 事件中读取自定义格式（需手动解析）

粘贴时（Ctrl+V / 右键→粘贴），触发 paste 事件。此时不能直接用 navigator.clipboard.read()（它需要用户手势且跨域受限），而应优先使用 event.clipboardData —— 它在 paste 事件中可安全读取，且包含所有已写入的格式：

调用 event.preventDefault() 阻止浏览器默认粘贴行为（例如把 HTML 渲染成 DOM 或纯文本插入）
用 clipboardData.types 查看可用格式列表，再用 clipboardData.getData(type) 提取对应内容
若检测到 application/x-myapp-card，就解析 JSON 并执行自定义逻辑（如插入卡片组件）；否则回退到 text/html 或 text/plain

示例：识别并处理自定义卡片粘贴

document.addEventListener('paste', (event) => {
  event.preventDefault();
  const clipboardData = event.clipboardData || window.clipboardData;

  if (!clipboardData) return;

  const types = clipboardData.types;
  let handled = false;

  // 优先尝试自定义格式
  if (types.includes('application/x-myapp-card')) {
    const cardJson = clipboardData.getData('application/x-myapp-card');
    try {
      const card = JSON.parse(cardJson);
      insertCustomCard(card); // 自定义插入逻辑
      handled = true;
    } catch (e) {
      console.warn('Invalid custom card data', e);
    }
  }

  // 回退：HTML → plain
  if (!handled && types.includes('text/html')) {
    const html = clipboardData.getData('text/html');
    document.execCommand('insertHTML', false, html);
  } else if (!handled && types.includes('text/plain')) {
    const text = clipboardData.getData('text/plain');
    document.execCommand('insertText', false, text);
  }
});

3. 使用 navigator.clipboard API 的补充场景（需用户交互）

当需要在非 copy/paste 事件上下文中读写剪贴板（如点击“复制链接”按钮），才应使用现代 Clipboard API。它更安全、支持 Promise，但有严格限制：

仅在安全上下文（HTTPS 或 localhost）中可用
必须由明确的用户手势触发（如 click、keydown）
.read() 和 .readText() 需要 clipboard-read 权限；.write() 需要 clipboard-write（现代浏览器通常自动授予）
读取自定义 MIME 类型需用 .read() 返回 ClipboardItem 数组，再遍历其 types 并调用 getType()（返回 Blob）

示例：按钮点击时读取自定义格式（注意权限与错误处理）

async function readCustomClipboard() {
  try {
    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes('application/x-myapp-card')) {
        const blob = await item.getType('application/x-myapp-card');
        const text = await blob.text();
        const card = JSON.parse(text);
        console.log('Pasted custom card:', card);
        return card;
      }
    }
  } catch (err) {
    console.error('Failed to read clipboard', err);
  }
}

document.getElementById('paste-btn').addEventListener('click', readCustomClipboard);

4. 注意事项与兼容性提示

实际落地时需兼顾兼容性与体验：

event.clipboardData 是传统方案，IE9+、Chrome/Firefox/Safari 均支持，无需权限，推荐作为 copy/paste 主流程
navigator.clipboard 是现代方案，Chrome 66+、Edge 79+、Firefox 63+、Safari 13.1+ 支持，但 Safari 对 .read() 的自定义 MIME 支持有限（建议降级处理）
自定义 MIME 类型无法被原生应用（如系统记事本、Word）识别，仅对同源 Web 应用或明确适配该格式的客户端有效
移动端（尤其是 iOS Safari）对 clipboardData 的支持较弱，建议 fallback 到 text/plain + 显式提示