如何在网站中添加复制时自动追加版权声明？

这是一种前端技术，主要通过监听浏览器的复制事件并在用户操作时动态修改剪贴板数据来实现版权信息注入。以下是核心实现步骤：

实现原理

关键点在 copy 事件监听器和 clipboardData 对象处理上：

1. 绑定监听事件：使用 JavaScript 监听目标 HTML 元素（通常为文章容器）的 copy 事件。
2. 截获复制操作：在事件处理函数中，调用 event.preventDefault() 阻止默认复制行为。
3. 添加版权信息：
   • 获取用户选中的文本 (window.getSelection().toString())
   • 拼接预设的版权小尾巴字符串
4. 设置剪贴板数据：通过 clipboardData.setData('text/plain', 处理后的文本) 更新剪贴板内容。

代码示例

document.getElementById('article-container').addEventListener('copy', (event) => {
  let clipboardData = event.clipboardData || window.clipboardData;
  if (!clipboardData || !window.getSelection) return;

  event.preventDefault();
  const selectedText = window.getSelection().toString();
  if (selectedText) {
    const copyrightText = `\n\n原文链接: ${window.location.href}\n著作权归作者所有`;
    clipboardData.setData('text/plain', selectedText + copyrightText);
  }
});

关键特性

• 局部触发：事件绑定特定容器元素（如 <div id="article-container">），确保只在复制文章主体内容时追加提示。
• 跨浏览器兼容：
  • 优先使用标准的 event.clipboardData
  • 对旧版 IE 支持 window.clipboardData
• 纯文本处理：通过 MIME 类型 text/plain 确保在不同粘贴场景（如文本编辑器）保持纯文本格式

体验优化

避免过度干扰用户体验（如复制菜单按钮时触发），精准匹配文本选区长度（可设置最小字符数触发条件）。

此方案无需服务器端处理，纯前端即可实现，依赖于浏览器对剪贴板操作 API 的支持。