代码创建ClipboardEvent时clipboardData未定义问题求助

这个问题我之前也碰到过，核心原因是浏览器的安全限制：直接通过ClipboardEvent构造函数创建的事件，并不会自动生成有效的clipboardData对象——毕竟剪贴板属于敏感资源，浏览器防止脚本随意伪造剪贴板内容。

解决方案：手动模拟clipboardData对象 #

我们可以给创建的ClipboardEvent手动添加一个模拟的clipboardData对象，实现getData方法来返回自定义数据。修改你的pasteFromCode函数即可：

function pasteFromCode() {
  const clipboardEvent = new ClipboardEvent('paste');
  // 手动构造clipboardData，模拟原生行为
  Object.defineProperty(clipboardEvent, 'clipboardData', {
    value: {
      getData: (type) => {
        // 根据类型返回对应数据，这里只处理text/plain
        return type === 'text/plain' ? '123' : '';
      }
    }
  });
  testPasteInput.dispatchEvent(clipboardEvent);
}

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="testPasteInput">
  <button onclick="pasteFromCode()">Paste</button>
  <script>
    const testPasteInput = document.getElementById('testPasteInput');
    testPasteInput.addEventListener('paste', ({clipboardData}) => console.log(clipboardData.getData('text')));

    function pasteFromCode() {
      const clipboardEvent = new ClipboardEvent('paste');
      Object.defineProperty(clipboardEvent, 'clipboardData', {
        value: {
          getData: (type) => type === 'text/plain' ? '123' : ''
        }
      });
      testPasteInput.dispatchEvent(clipboardEvent);
    }
  </script>
</body>
</html>

补充说明 #

如果你是想操作真实的系统剪贴板，建议使用标准的Clipboard API（比如navigator.clipboard.writeText('123')），然后再触发paste事件。但如果只是需要模拟paste事件传递自定义数据而不修改真实剪贴板，上面的模拟方法就完全够用了。

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