HTML怎么做复制带版权信息_html复制文字自动追加版权【零基础】-html教程-PHP中文网

必须用 JavaScript 监听 copy 事件并调用 preventDefault() 才能实现复制时追加版权信息，纯 HTML 无法做到；需兼容 navigator.clipboard.writeText() 和 document.execCommand()，注意 DOM 加载、跨上下文选中及特殊字符处理。

html怎么做复制带版权信息_html复制文字自动追加版权【零基础】

直接在网页里复制文字时自动追加版权信息，不能靠纯 HTML 实现，必须用 JavaScript 监听剪贴板事件。HTML 本身没有“复制时改内容”的能力，所有所谓“零基础”纯 HTML 方案，最终都得加 JS。

copy 事件监听是唯一可靠方式

浏览器只在用户触发复制（Ctrl+C / 右键复制）时发出 copy 事件，这时你可以读取当前选中文本、拼接版权，并写入剪贴板。关键点：

document.addEventListener('copy', handler) 是入口，必须存在且生效
必须调用 event.preventDefault()，否则你写的逻辑会被原生复制覆盖
只能修改选中的文本内容，无法影响图片、表格或富文本格式（比如加粗、链接）
移动端 Safari 对 document.execCommand 支持差，推荐用现代 navigator.clipboard.writeText() + event.preventDefault() 组合

兼容性写法：fallback 到 execCommand

不是所有浏览器都支持 navigator.clipboard.writeText()（尤其旧版 Safari 和部分安卓 WebView），稳妥做法是先尝试新 API，失败再回退：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

document.addEventListener('copy', (e) => {
  const selection = document.getSelection();
  if (!selection.rangeCount) return;

  const text = selection.toString();
  const copyright = '\n\n来源：我的网站 | 不得转载';
  const newText = text + copyright;

  e.preventDefault();

  // 尝试现代 API
  if (navigator.clipboard) {
    navigator.clipboard.writeText(newText).catch(() => {
      fallbackCopyTextToClipboard(newText);
    });
  } else {
    fallbackCopyTextToClipboard(newText);
  }
});

function fallbackCopyTextToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}