React中如何访问onCopy事件值并通过ClipboardEvent修改剪贴板内容

可以通过ClipboardEvent类型的事件对象修改用户复制到剪贴板的内容，具体操作方式如下：

• 第一步先调用e.preventDefault()阻止事件默认行为：浏览器默认会直接将用户选中的内容写入剪贴板，只有先阻止默认行为才能覆盖为自定义内容
• 第二步调用事件对象的clipboardData.setData()方法写入自定义内容，方法接收两个参数：第一个为内容的MIME类型，常用取值为text/plain（纯文本）、text/html（富文本）；第二个参数为要写入剪贴板的具体内容。

可运行示例代码 #

<div onCopy={(e) => {
  // 阻止默认复制行为
  e.preventDefault();
  // 可选：获取用户原本选中的内容，修改后再写入
  const originSelected = window.getSelection().toString();
  const modifiedContent = `你复制的原内容是：${originSelected}，这是追加的自定义内容`;
  // 写入剪贴板
  e.clipboardData.setData('text/plain', modifiedContent);
}}>
  选中这段文字进行复制，剪贴板内容会被修改为自定义内容
</div>

注意事项 #

1. 仅用户主动触发的可信复制事件（真实用户操作触发，而非脚本主动派发的非可信事件）才可以正常访问e.clipboardData对象，这是浏览器的安全策略，避免恶意脚本随意篡改用户剪贴板内容
2. 若需要写入富文本内容，只需将setData第一个参数改为text/html，第二个参数传入对应的HTML字符串即可
3. 部分浏览器隐私模式、跨域iframe场景下可能会限制剪贴板访问权限，需要兼容对应场景的话建议额外做异常捕获处理

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