JavaScript 中怎么监听剪贴板的复制、剪切与粘贴事件-js教程-PHP中文网

javascript可通过原生copy/cut/paste事件监听剪贴板操作：copy/cut需preventdefault()并用clipboarddata.setdata()动态修改内容，仅限用户交互中调用；paste可直接读取clipboarddata.getdata()，无需preventdefault()；navigator.clipboard api需https和用户手势。

javascript 中怎么监听剪贴板的复制、剪切与粘贴事件

JavaScript 中可以通过原生事件监听剪贴板操作：复制（copy）、剪切（cut）和粘贴（paste）。这些事件在用户触发对应操作时触发，但需注意权限、触发时机和内容读写限制。

监听 copy 和 cut 事件（写入剪贴板前）

这两个事件在用户执行复制或剪切操作时同步触发，常用于动态修改将要复制/剪切的内容。事件对象提供 clipboardData 对象，可调用 setData() 设置文本或 HTML 内容。

必须在事件处理函数中调用 event.preventDefault()，否则默认行为（如复制选中文本）仍会执行，且 setData() 无效
仅在用户主动交互（如点击、按键）触发的事件中可用；不能在定时器或异步回调中调用
推荐监听 document 或具体输入区域（如 contenteditable 元素、textarea），而非全局 window（部分浏览器不支持）

示例：

document.addEventListener('copy', (e) => {
  e.preventDefault();
  const selection = window.getSelection();
  const text = selection.toString().trim() || '自定义复制内容';
  e.clipboardData.setData('text/plain', text);
});

监听 paste 事件（读取剪贴板内容）

paste 事件在用户粘贴时触发，可通过 event.clipboardData 获取剪贴板数据。与 copy/cut 不同，它默认允许执行，无需 preventDefault() 即可读取（但若想拦截默认粘贴行为，则需调用）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

支持读取多种类型：'text/plain'、'text/html'、'text/uri-list' 等，可用 getData(type) 获取
若需获取图像等二进制内容（如截图粘贴），可检查 clipboardData.items，遍历 items 查找 type.startsWith('image/')
注意：直接访问剪贴板（如 navigator.clipboard.readText()）需用户手势 + 安全上下文（HTTPS），而 paste 事件无此限制，更可靠

示例（提取纯文本并插入到编辑器）：

document.addEventListener('paste', (e) => {
  e.preventDefault();
  const text = e.clipboardData.getData('text/plain');
  const html = e.clipboardData.getData('text/html');
  
  // 根据需要选择处理逻辑，例如只接受纯文本
  if (text) {
    document.execCommand('insertText', false, text);
  }
});

注意兼容性与安全限制

现代浏览器基本支持这三个事件，但细节有差异：

cut 事件仅对可编辑元素（如 input、textarea、contenteditable="true"）有效；对普通 div 默认不触发
Safari 对 clipboardData.setData() 支持较弱，建议降级为仅读取或使用 navigator.clipboard.writeText()（需用户手势）
某些浏览器（如 Firefox）在非焦点元素上可能不触发 copy/cut，确保监听目标处于可交互状态
移动端 Safari 对 paste 支持有限，部分场景需配合 input 的 oninput 或 compositionend 补充处理

替代方案：使用 navigator.clipboard API（需显式授权）

若需脱离用户交互事件主动读写剪贴板（如点击按钮复制），应使用 navigator.clipboard：

写入：navigator.clipboard.writeText('hello') 或 write([...items])
读取：navigator.clipboard.readText() 或 read()
必须在用户手势（如 click、tap）中调用，且页面需运行在 HTTPS 或 localhost 上
首次调用会触发浏览器权限提示（Permission API），可提前用 navigator.permissions.query({name:'clipboard-read'}) 检查状态

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南