原生JS在网页上复制的所有文字后面自动加上一段版权声明

Myth丶恋晨 2023-03-12 10:54 10阅读 0赞

不少技术博客有这样的处理，当我们复制代码的时候，会自动加上一段本信息版权为XXXX，这是怎么实现的呢？

我这边是没有加这些的，代码什么的想复制就复制好了。大家都是靠代码技能吃饭的，可以体会写代码的不易，相信一定会尊重知识劳动成果——保留出处等版权信息的。

## 效果示例 : ##

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2NvbW1vbi8xNjY5NDk4LzIwMjAwMS8xNjY5NDk4LTIwMjAwMTE4MTM1NzM2MTMzLTY0MDA4NzA3Ny5naWY][]

## 代码示例： ##

<body>
        <p>是的你没有看错, 我还是在路边吃快餐, 在北京市的三里屯, 在上海市的外滩</p>
    </body>
    <script>
        // 监听整个网页的copy(复制)事件
      document.addEventListener('copy', function (event) {
      // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
        let clipboardData = event.clipboardData || window.clipboardData;
        // 如果未复制或者未剪切，则return出去
        if (!clipboardData) { return; }
        // Selection 对象，表示用户选择的文本范围或光标的当前位置。
        //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
        let text = window.getSelection().toString();
        if (text) {
          // 如果文本存在，首先取消文本的默认事件
          event.preventDefault();
          // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本
    
          // setData(format, data);参数
          // format
          // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
          // data
          // 一个 DOMString表示要添加到 drag object的数据。
          clipboardData.setData('text/plain', text + '\n\n张无忌 版权所有');
        }
      });
    
    </script>

## 以上代码相关参数详解： ##

### **element.addEventListener(type, handle, false);** ###

type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！

handle:事件处理函数，事件出发后，定义可能发生的变化！！

false: 表示事件冒泡模型，一般来说都是false。

![format_png][]

### **`clipboardData`** ###

**`clipboardData`**属性保存了一个 `DataTransfer` 对象（用户剪切板的内容），这个对象可用于：

**`　　format`数据类型**有：`text/plain`，`text/uri-list。data表示要添加到剪切板的数据。`

*  描述哪些数据可以由 `cut` 和 `copy` 事件处理器放入剪切板，通常通过调用**`setData(format,`**方法；设置拖放操作的数据（剪切板的数据）到指定的数据和类型。

*  获取由 `paste` 事件处理器拷贝进剪切板的数据，通常通过调用**`getData(format)`** 方法

![format_png 1][]

### **event.preventDefault() 方法阻止元素发生默认的行为。** ###

例如：

*  当点击提交按钮时阻止对表单的提交
 *  阻止以下 URL 的链接

![format_png 2][]

# 如果有任何疑问即可留言反馈，会在第一时间回复反馈，谢谢大家 #

[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2NvbW1vbi8xNjY5NDk4LzIwMjAwMS8xNjY5NDk4LTIwMjAwMTE4MTM1NzM2MTMzLTY0MDA4NzA3Ny5naWY]: /images/20230312/76f17677c1064b7299ef508ca7afc9f5.png
[format_png]: /images/20230312/5d573a42b5aa44eeb1c299ab535b11cd.png
[format_png 1]: /images/20230312/221c0ff6c9c943b19874cb851f90f445.png
[format_png 2]: /images/20230312/85fdbe2351244989be358d3385b891e2.png