JavaScript 中事件机制怎么处理剪贴板复制事件-js教程-PHP中文网

javascript剪贴板操作分两类：监听copy事件可拦截用户复制并修改内容，需preventdefault()和clipboarddata；主动调用navigator.clipboard.writetext()实现一键复制，须https、用户手势且返回promise。

javascript 中事件机制怎么处理剪贴板复制事件

JavaScript 处理剪贴板复制事件，核心在于两类机制：监听原生 copy 事件 和 主动调用 navigator.clipboard.writeText()。两者用途不同、触发条件不同、兼容性也不同，不能混用。

监听 copy 事件：拦截或定制用户复制行为

当用户手动选中文本并按下 Ctrl+C（或右键→复制）时，浏览器会触发 `copy` 事件。你可以监听它，修改实际写入剪贴板的内容，甚至阻止默认行为。

关键点：

事件对象有 event.clipboardData，可用 setData('text/plain', '自定义文本') 替换原始内容
必须调用 event.preventDefault()，否则你的 setData 不生效
只对可编辑元素（如 input、textarea）或全局 document 有效；普通 div 需设 contenteditable="true"
不依赖 HTTPS 或用户手势，但仅限纯文本、HTML、图片等有限 MIME 类型

示例：在页面任意位置复制时自动添加版权信息

document.addEventListener('copy', e => {
  const selection = window.getSelection();
  const originalText = selection.toString().trim();
  if (originalText) {
    e.preventDefault();
    e.clipboardData.setData('text/plain', `${originalText}\n—— 来源：your-site.com`);
  }
});

主动写入剪贴板：实现“一键复制”功能

这不是监听用户动作，而是由脚本在用户点击按钮等交互后，把指定内容写进系统剪贴板。

必须满足三个前提：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

页面运行在 HTTPS 或 localhost（安全上下文）
调用发生在 用户手势内（如 click、keydown），不能在定时器或异步回调里直接调用
现代浏览器支持 navigator.clipboard.writeText()，返回 Promise

示例：点击按钮复制 API 密钥

copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('sk_live_abc123...');
    console.log('已复制');
  } catch (err) {
    console.error('复制失败：', err.name); // 可能是 "NotAllowedError" 或 "SecurityError"
  }
});