Javascript自定义页面复制事件

Javascript自定义页面复制事件 – WhiteNight's Site

2023年10月13日

文章访问量：90

标签：Javascript

监听copy事件以达到自定义页面复制功能的效果。

写者注

需要注意的是，浏览器的部分拓展插件（如迅雷）会导致本文的代码报错。不过该报错不影响功能，而且只有在f12开发者控制台才能看见。不过如果觉得看着报错不顺眼的话，关闭导致你报错的拓展即可（自己一个一个试）。

什么是copy事件

用户的复制事件

当用户尝试在页面上复制某些内容时，就会触发copy事件。而通过监听copy事件，我们就可以自定义用户在页面上的复制的内容。比如当用户尝试复制时，出现弹窗或跳转页面（如百度文库）；又或者是在用户复制的内容后加上copyright内容（如csdn）。

示例：禁止用户复制，并添加弹窗或跳转页面

代码和效果示例

先放一个能自由输入和复制的文本框在这里，方便调试。

测试文本:

先来实现禁止用户复制的逻辑。这里先放例子。可以试着复制下列文本，再粘贴到上方的文本框中，看看能不能复制成功。

->    你不能复制该内容    <-

->    你可以复制该内容    <-

写者注

样式实在不想改，琢磨css样式的话一琢磨就是一整天。还是先把文章完成再说。

上面这段代码实现了对<p>段落标签的监听，当用户尝试复制该内容时，阻止默认的复制事件，并实现你自定义的事件。这里自定义的是修改用户剪贴板的内容，并在浏览器中显示一个警告的弹窗。以下是代码（除去了css）

<div class="copypanel">
  <p id="content">
    -&gt;&nbsp;&nbsp;&nbsp;&nbsp;你不能复制该内容&nbsp;&nbsp;&nbsp;&nbsp;&lt;-
  </p>
  <p id="content2">
    -&gt;&nbsp;&nbsp;&nbsp;&nbsp;你可以复制该内容&nbsp;&nbsp;&nbsp;&nbsp;&lt;-
  </p>
</div>

<script>
  content.addEventListener('copy',(e)=>{
    e.preventDefault();
    e.clipboardData.setData('text/plain','复制失败！');
    alert("不准复制！！！")
  })
</script>

那跳转页面也不难实现，直接给实现效果和代码吧。现在当你尝试复制相关内容时，会自动打开我的网站首页。

->    你不能复制该内容    <-

->    你可以复制该内容    <-

<div class="copypanel2">
  <p id="content3">
    ->&nbsp;&nbsp;&nbsp;&nbsp;你不能复制该内容&nbsp;&nbsp;&nbsp;&nbsp;<-
  </p>
  <p id="content4">
    ->&nbsp;&nbsp;&nbsp;&nbsp;你可以复制该内容&nbsp;&nbsp;&nbsp;&nbsp;<-
  </p>
</div>

<script>
  content3.addEventListener('copy',(e)=>{
    e.preventDefault();
    window.open("https://white-night.club"); 
  })
</script>

写者注

由于wordpress中自定义html区块就是直接把相关代码直接插入进当前html的一个div容器中，所以如果不指定要监听的元素，会导致当前页面的所有内容都无法访问。想监听当前页面所有dom的话把content换成document.addEventListener即可。