本文介绍一种可靠方法：通过结合 `window.getselection()` 和 `document.activeelement` 判断当前是否处于文本选择或可编辑元素上下文中，从而精准控制自定义剪贴板逻辑的触发时机，避免干扰输入框、文本域及富文本区域的原生复制粘贴行为。
在构建支持拖拽布局与内容编辑的 React 应用时，常需为页面级组件（如可选中的 div 区块）添加自定义剪贴板能力——例如复制选中组件的 ID 或序列化状态，粘贴时还原布局结构。但若直接在 document 上监听 'copy' 和 'paste' 事件并调用 event.preventDefault()，会无差别拦截所有剪贴板操作，导致 、
核心思路是：仅当用户操作“不涉及任何可编辑内容”时，才启用自定义剪贴板逻辑。这可通过两个关键判断实现：
-
是否有文本被选中？
使用 window.getSelection() 检查当前选区是否非空且未折叠：const isPageTextSelected = () => { const selection = window.getSelection(); return selection && !selection.isCollapsed; }; -
焦点是否落在可编辑元素上？
检查 document.activeElement 是否为 、const isInputActive = () => { const { activeElement } = document; return ( activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement?.isContentEditable ); };
将上述判断嵌入事件监听器中，即可实现“按需接管”：
// Copy handler
document.addEventListener('copy', (event) => {
if (!selectedItem) return;
// ✅ 仅当无文本选中且焦点不在可编辑元素上时执行自定义逻辑
if (isPageTextSelected() || isInputActive()) {
return; // 让浏览器执行默认复制（如复制选中文本或 input 值）
}
event.clipboardData?.setData('text/plain', selectedItem.id);
event.clipboardData?.setData(
'application/x-my-app-item-json',
JSON.stringify(selectedItem)
);
event.preventDefault(); // 此时才阻止默认行为
});
// Paste handler
document.addEventListener('paste', (event) => {
// ✅ 粘贴时若焦点在可编辑元素上，完全交由浏览器处理（如粘贴到 textarea）
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 {
// 忽略非法 JSON，不阻止默认粘贴（例如纯文本仍可粘贴）
}
});⚠️ 注意事项：
- 此方案不依赖 DOM 结构（如 event.target === document.body），避免了因事件冒泡目标不一致导致的误判；
- isContentEditable 的检查确保对基于 div[contenteditable] 的富文本编辑器友好；
- 若应用中存在其他需保留原生剪贴板行为的自定义组件（如 RichTextEditor），可扩展 isInputActive() 逻辑，例如检查 activeElement.dataset.editorType === 'rich'；
- 在 React 中建议在 useEffect 中注册/卸载监听器，并注意 selectedItem 和 insertItem 的闭包引用问题（推荐使用 ref 或 useCallback 保证稳定性）。
该策略在保持原生体验的前提下，实现了剪贴板行为的“智能降级”：有文本可选、有输入框聚焦 → 走原生流程；否则 → 启用应用级数据交换逻辑。简洁、鲁棒，且易于维护。
