本文介绍一种可靠策略：通过检测当前文本选区（`window.getselection()`）和活跃元素（`document.activeelement`）状态，精准判断是否应让浏览器执行原生剪贴板行为（如复制输入框内容），仅在无文本选中且非可编辑区域时才触发自定义复制/粘贴逻辑。
在构建支持拖拽排序与富文本编辑的 React 应用时，常需为页面级组件（如可选中的 div 区块）添加自定义剪贴板能力——例如复制选中区块的 ID 与结构数据、粘贴时重建布局。但若直接全局监听 'copy' 和 'paste' 事件并调用 event.preventDefault()，会无差别劫持所有剪贴板操作：用户无法再正常复制 <input> 中的文字、无法在 <textarea> 中粘贴内容，甚至选中文本后按 Ctrl+C 也会被覆盖为区块数据。
根本问题在于：需区分“用户意图操作文本”与“用户意图操作应用状态”。理想行为应是：
- ✅ 当光标聚焦于 <input> / <textarea> 或 contenteditable="true" 元素，或存在非空文本选区时 → 放行原生行为（不阻止默认，不执行自定义逻辑）；
- ✅ 当页面空白处触发剪贴板事件，且有有效 selectedItem → 执行自定义逻辑并阻止默认；
- ❌ 不依赖 event.target === document.body 等脆弱判断（因焦点可能落在按钮等无关元素上）。
以下是经过实践验证的解决方案，建议封装为工具函数并在事件处理器中前置校验：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
// 工具函数：检测当前是否有文本被选中
const isPageTextSelected = (): boolean => {
const selection = window.getSelection();
return selection && !selection.isCollapsed;
};
// 工具函数：检测当前活跃元素是否为可编辑文本控件
const isInputActive = (): boolean => {
const { activeElement } = document;
return (
activeElement instanceof HTMLInputElement ||
activeElement instanceof HTMLTextAreaElement ||
(activeElement?.isContentEditable === true)
);
};
// 复制事件处理（挂载于 document）
document.addEventListener('copy', (event) => {
if (!selectedItem) return;
// 关键守卫：若存在文本选区或焦点在可编辑元素上，跳过自定义逻辑
if (isPageTextSelected() || isInputActive()) {
return; // 让浏览器执行原生复制（如复制输入框值或选中文本）
}
// 否则：写入自定义数据格式并阻止默认
event.clipboardData?.setData('text/plain', selectedItem.id);
event.clipboardData?.setData(
'application/x-my-app-item-json',
JSON.stringify(selectedItem)
);
event.preventDefault();
});
// 粘贴事件处理（挂载于 document）
document.addEventListener('paste', (event) => {
// 关键守卫：若焦点在可编辑元素上，完全放行（避免干扰用户向输入框粘贴）
if (isInputActive()) {
return;
}
// 尝试读取自定义数据格式
const itemJson = event.clipboardData?.getData('application/x-my-app-item-json');
if (!itemJson) return;
try {
const item = JSON.parse(itemJson);
insertItem(item); // 自定义插入逻辑
event.preventDefault(); // 阻止后续可能的文本粘贴（避免重复插入）
} catch (e) {
// 数据格式错误，静默忽略
}
});⚠️ 注意事项与最佳实践：
- 避免内存泄漏：务必在组件卸载或不再需要时调用 removeEventListener 清理监听器；
- contenteditable 兼容性：isContentEditable 属性需显式检查 === true（而非布尔转换），因继承自父级的 contenteditable="inherit" 会返回 "inherit" 字符串；
- 移动端兼容性：iOS Safari 对 clipboardData 的支持较弱，生产环境建议结合 navigator.clipboard.write()（需 HTTPS + 用户手势）作为降级方案；
- 语义化增强：可在自定义复制前添加 event.clipboardData?.setData('text/html', ...) 提升跨应用粘贴体验（如粘贴到富文本编辑器）；
- 调试技巧：临时添加 console.log({ isPageTextSelected: isPageTextSelected(), isInputActive: isInputActive() }) 快速验证判断逻辑是否符合预期。
该方案不依赖 DOM 结构假设，仅基于浏览器原生 API 反映的真实用户意图，平衡了功能扩展性与用户体验一致性，是实现“智能剪贴板”的推荐范式。
