JavaScript中clipboardData API粘贴功能报错：Uncaught TypeError问题

错误根源 #

• window.event 是IE遗留的非标准属性，现代浏览器里事件对象都是通过回调参数传递的。更关键的是：click事件本身不会携带clipboardData属性，只有paste这类剪贴板专属事件才会提供该属性。
• 浏览器安全策略限制：不能在非剪贴板触发的事件里直接读取剪贴板数据，必须在用户明确触发的剪贴板操作事件内，或是使用符合标准的navigator.clipboard API（需在用户交互上下文里调用）。

解决方案1：监听paste事件捕获粘贴操作 #

如果是要捕获用户主动粘贴的行为，给目标元素（比如输入框、全局document）绑定paste事件即可：

HTML代码 #

<input type="text" id="inputArea" placeholder="在这里粘贴内容">
<button onclick="myFunction()">点击触发粘贴读取</button>
<button id="button">Paste</button>

JavaScript代码 #

// 监听输入框的paste事件
document.getElementById('inputArea').addEventListener('paste', function(e) {
  // 兼容IE和现代浏览器的clipboardData获取方式
  const clipboardData = e.clipboardData || window.clipboardData;
  const pasteText = clipboardData.getData('text');
  console.log('粘贴的内容:', pasteText);
});

解决方案2：使用现代Clipboard API（推荐） #

现代浏览器支持navigator.clipboard API，可以在用户交互（比如按钮点击）中直接读取剪贴板数据，注意两点：

• 必须在HTTPS环境下使用（本地localhost除外）
• 必须在用户触发的交互事件内调用（比如click回调函数里）

修正后的按钮点击代码 #

function myFunction() {
  navigator.clipboard.readText()
    .then(text => console.log('paste value:' + text))
    .catch(err => console.error('读取剪贴板失败:', err));
}

const button = document.getElementById("button");
button.addEventListener("click", async function() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('paste value:' + text);
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
});

总结 #

你原来的代码错误在于试图在click事件里获取clipboardData，这不符合浏览器的事件机制和安全规则。如果是捕获用户粘贴操作，用方案1的paste事件监听；如果是通过按钮主动读取剪贴板，用方案2的navigator.clipboard API即可。

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