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 片段（含
<html>或至少<body>内容），部分应用（如 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+ 显式提示
