17370845950

本文介绍一种可靠策略：通过检测当前文本选区（`window.getselection()`）和活跃元素（`document.activeelement`）状态，精准判断是否应让浏览器执行原生剪贴板行为（如复制输入框内容），仅在无文本选中且非可编辑区域时才触发自定义复制/粘贴逻辑。

在构建支持拖拽排序与富文本编辑的 React 应用时，常需为页面级组件（如可选中的 div 区块）添加自定义剪贴板能力——例如复制选中区块的 ID 与结构数据、粘贴时重建布局。但若直接全局监听 'copy' 和 'paste' 事件并调用 event.preventDefault()，会无差别劫持所有剪贴板操作：用户无法再正常复制 中的文字、无法在 中粘贴内容，甚至选中文本后按 Ctrl+C 也会被覆盖为区块数据。

根本问题在于：需区分“用户意图操作文本”与“用户意图操作应用状态”。理想行为应是：

• ✅ 当光标聚焦于 / 或 contenteditable="true" 元素，或存在非空文本选区时 → <strong>放行原生行为</strong>（不阻止默认，不执行自定义逻辑）；
• ✅ 当页面空白处触发剪贴板事件，且有有效 selectedItem → 执行自定义逻辑并阻止默认；
• ❌ 不依赖 event.target === document.body 等脆弱判断（因焦点可能落在按钮等无关元素上）。

以下是经过实践验证的解决方案，建议封装为工具函数并在事件处理器中前置校验：

// 工具函数：检测当前是否有文本被选中
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 反映的真实用户意图，平衡了功能扩展性与用户体验一致性，是实现“智能剪贴板”的推荐范式。