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

更新日期: 2020-01-20阅读: 2.4k标签: 复制分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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

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

代码：

<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。

clipboardData

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

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

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

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

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

例如：

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

原文 http://www.cnblogs.com/zhaohongcheng/p/12208492.html

链接: https://fly63.com/article/detial/7342

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

代码：

参数详解：

element.addEventListener(type, handle, false);

clipboardData

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

原生Js实现复制(Copy)的方法总结，execCommand和clipboardData的使用

网页不让用户复制方法总汇,设置html禁止选择，保护源码，js禁止复制文字

Js使用Object.assign()对象的复制、合并、封装等操作

程序员_代码神注释鉴赏大全（可复制粘贴）

Vue中结合clipboard实现复制功能

最全的js对象克隆和数组克隆方法

原生js实现复制内容到剪切板，兼容pc、移动端（支持Safari浏览器）

如何设置网页无法复制？

HTML页面用CSS实现禁止选中、复制和右键

css如何设置不可复制？

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

代码：

参数详解：

element.addEventListener(type, handle, false);

clipboardData

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

原生Js实现复制(Copy)的方法总结，execCommand和clipboardData的使用

网页不让用户复制方法总汇,设置html禁止选择，保护源码，js禁止复制文字

Js使用Object.assign()对象的复制、合并、封装等操作

程序员_代码神注释鉴赏大全（可复制粘贴）

Vue中结合clipboard实现复制功能

最全的js对象克隆和数组克隆方法

原生js实现复制内容到剪切板，兼容pc、移动端（支持Safari浏览器）

如何设置网页无法复制？

HTML页面 用CSS实现禁止选中、复制和右键

css如何设置不可复制？

HTML页面用CSS实现禁止选中、复制和右键