React中触发CTRL+V时如何获取剪贴板内容？

核心前提 #

浏览器出于安全限制，仅允许在**用户主动触发的交互上下文（如粘贴操作、快捷键触发的主动操作）**内读取剪贴板内容，无法在非用户交互场景下直接访问。

实现方案1：监听原生paste事件（推荐） #

这种方式贴合浏览器原生交互逻辑，权限限制更少，兼容性更好：

import { useEffect } from 'react';

function ClipboardDemo() {
  useEffect(() => {
    const handlePaste = async (e) => {
      // 若需自定义粘贴行为，可阻止默认操作
      // e.preventDefault();
      
      try {
        // 现代浏览器异步读取剪贴板文本
        const clipboardText = await navigator.clipboard.readText();
        if (clipboardText) {
          alert(`剪贴板内容：${clipboardText}`);
          // 可扩展：将内容插入输入框、存入状态等
        }
      } catch (err) {
        console.error('读取剪贴板失败:', err);
        // 降级方案：从事件对象的clipboardData中获取内容
        const fallbackText = e.clipboardData?.getData('text');
        if (fallbackText) {
          alert(`剪贴板内容（兼容模式）：${fallbackText}`);
        }
      }
    };

    window.addEventListener('paste', handlePaste);
    return () => window.removeEventListener('paste', handlePaste);
  }, []);

  return (
    <div>
      <p>尝试粘贴内容（Ctrl+V/右键粘贴），将弹出剪贴板文本</p>
    </div>
  );
}

export default ClipboardDemo;

实现方案2：结合现有快捷键监听逻辑 #

如果需要保留你已有的Ctrl+V快捷键检测逻辑，可按以下方式调整：

import { useEffect } from 'react';

function ShortcutClipboardDemo() {
  useEffect(() => {
    const handleKeyDown = async (e) => {
      // 兼容Windows/Linux的Ctrl+V和Mac的Cmd+V
      if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
        e.preventDefault();
        
        try {
          const clipboardText = await navigator.clipboard.readText();
          alert(`剪贴板内容：${clipboardText}`);
        } catch (err) {
          console.error('读取剪贴板失败:', err);
          // 快捷键场景下无clipboardData，需提示用户切换操作
          alert('无法读取剪贴板权限，请尝试右键粘贴');
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div>
      <p>按下Ctrl+V/Cmd+V，将弹出剪贴板文本</p>
    </div>
  );
}

export default ShortcutClipboardDemo;

注意事项 #

• 仅在HTTPS环境（localhost开发环境除外）下支持navigator.clipboard API
• 若用户拒绝剪贴板权限，API会抛出错误，需做好错误捕获和提示
• 优先推荐使用paste事件方案，其权限限制更低、兼容性更好

内容的提问来源于stack exchange，提问作者user204069