layui怎么实现页面内容被鼠标选中复制时自动在末尾追加版权来源声明-Layui教程-PHP中文网

应监听 document 级 copy 事件并调用 event.preventDefault() 才能修改剪贴板内容，需排除表单、contenteditable 元素及 Layui 弹层；IE11 和 iOS Safari 不支持 setData，应降级处理或提示仅桌面端生效。

layui怎么实现页面内容被鼠标选中复制时自动在末尾追加版权来源声明

监听 document 的 `copy` 事件拦截原生复制行为

Layui 本身不提供复制拦截 API，但浏览器原生支持 copy 事件，且该事件在用户按下 Ctrl+C（或右键复制）时触发，此时可读取并修改剪贴板内容。关键在于：必须在事件回调中调用 event.preventDefault()，否则后续对 event.clipboardData 的修改会被忽略。

常见错误是只绑定到某个容器元素，漏掉全页面选中（比如跨区块拖选），所以应监听 document 级别：

document.addEventListener('copy', function (event) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const selectedText = selection.toString().trim();
  if (!selectedText) return;

  const copyright = '\n\n来源：' + location.href;
  const copiedContent = selectedText + copyright;

  event.preventDefault();
  event.clipboardData.setData('text/plain', copiedContent);
});

兼容性注意：IE 不支持 `clipboardData` 写入，需降级处理

IE11 虽支持 copy 事件，但 event.clipboardData.setData() 在非安全上下文（如 http）下可能静默失败；更严重的是，IE 不允许 JS 主动写入剪贴板，只能靠 document.execCommand('copy') 配合临时中转——但这会破坏原生复制流程，导致体验割裂。

实际方案建议：

现代浏览器（Chrome/Firefox/Edge/新版 Safari）直接走 clipboardData.setData 路径
IE11 及旧 Edge（≤18）跳过追加逻辑，仅保留原始复制（不报错、不阻断）
可通过 if (event.clipboardData && event.clipboardData.setData) 判断能力

避免污染代码块、输入框等可编辑区域

用户可能在、或 Layui 的 layui-textarea 里编辑内容，此时追加版权会干扰正常输入。需要排除这些场景：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

检查 event.target 是否为表单控件：['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName)
检查是否处于 contenteditable="true" 区域：event.target.closest('[contenteditable="true"]')
Layui 的弹层（如 layer.open）内部也常含表单，一并过滤

示例判断逻辑：

const target = event.target;
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) ||
    target.closest('[contenteditable="true"]') ||
    target.closest('.layui-layer')) {
  return; // 不处理
}