前端用js禁用复制事件

我现在有一个html

<body>
  <p>
    这是一段我要复制的文字信息xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    这是一段我要复制的文字信息xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    这是一段我要复制的文字信息xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  </p>
</body>

我需要实现不让任何人复制页面内容的功能。这个其实有很多简单的方式就能实现。

一、标准操作——监听

给document添加copy监听，直接 preventDefault 阻止，然后还能用 clipboardData 自定义复制的内容。或者更狠一些，直接绑在window上，禁止整个窗口的复制。

// 方案1. document监听复制事件
document.addEventListener('copy', function (e) {
  e.preventDefault();
  // 这里可以自定义复制到的内容
  e.clipboardData.setData('text/plain', '自定义的复制内容');
  alert('复制事件被禁止');
})

// 方案2. 效果跟方案1相同，直接改变document自身的copy事件
document.oncopy = (e) => {
  alert('复制事件被禁止');
  e.clipboardData.setData('text/plain', '自定义的复制内容');
  return false;
}

// 方案3. 范围再大一些可以限制整个窗口的复制
window.addEventListener('copy', function (e) {
  e.preventDefault();
  e.clipboardData.setData('text/plain', '全局禁止复制');
  alert('全局复制事件被禁止');
})

除了上面的监听还有类似 beforecopy 这种事件也可以。

二、其他操作

1. 用css

可以直接用user-select属性，设置为none，即可让用户不能选中文本。但是对用户来说不怎么友好，莫名其妙没发选中了。

p {
  user-select: none;
}

2. 其它监听混用

有了直接监听copy事件的，可以修改document其他的事件监听也能禁止用户操作。

// 禁止打开右击菜单
document.oncontextmenu = () => {
  alert('右击菜单被禁止');
  return false;
}

// 禁止选中文字
document.onselectstart = () => {
  alert('选中文字被禁止');
  return false;
}

// 禁止剪切（可以正常选中、剪切，选中后剪切的内容为自定义内容，不设置的话为空）
// 注意：网页里的文字基本本身就不能剪切，所以这个一般不设置
document.oncut = (e) => {
  alert('剪切事件被禁止');
  e.clipboardData.setData('text/plain', '自定义的剪切内容');
  return false;
}
posted @ 2025-03-12 17:09  honoka_Gu  阅读(176)  评论(0)    收藏  举报