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

其实实现的方式很简单，可以在我的网站页面上绑定一个copy事件，当你复制文章内容的时候，自动在剪切板文字后面加上一段版权声明。

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

效果示例 :

代码示例：

<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 的链接

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

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

  1. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  2. 使用原生JS定位网页元素

    约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw&qu ...

  3. 使用js在网页上记录鼠标划圈的小程序

    Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...

  4. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  5. 原生js实现文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js解决网页无法复制文字的问题

    碰到有些网站,站长禁止了右键,或者用其它方法不让复制网页的文字,弄的好烦人啊,虽然这是小把戏,但多多少少造成了一些不方便,前几天发现这个解决不能复制问题的小方法,一行代码即搞定,就是下面这行: jav ...

  7. 原生JS实现图片上传并预览功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS获取网页宽高

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  9. 原生js实现网页触屏滑动

    前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

随机推荐

  1. 【codeforces 764B】Timofey and cubes

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  2. P1061 最长连号

    题目描述 输入n个正整数,(1<=n<=10000),要求输出最长的连号的长度.(连号指从小到大连续自然数) 输入格式 第一行,一个数n; 第二行,n个正整数,之间用空格隔开. 输出格式 ...

  3. VScode快捷键（最全）

    按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + ...

  4. Consul etcd ZooKeeper euerka 对比

    这里就平时经常用到的服务发现的产品进行下特性的对比,首先看下结论: Feature Consul zookeeper etcd euerka 服务健康检查 服务状态,内存,硬盘等 (弱)长连接,kee ...

  5. mybatis的核心配置文件

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...

  6. VUE事件修饰符.passive、.capture、.once实现原理——重新认识addEventListener方法

    https://www.jianshu.com/p/b12d0d3ad4c1 .passive的作用与使用场景 https://juejin.im/post/5ad804c1f265da504547f ...

  7. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

  8. Raid相关操作与注意事项记录

    Raid相关操作与注意事项 Raid5 SATA盘组成的Raid5,在保护数据的前提下达到高性能: RAID要有BBU Current Cache Policy采用WriteBack,No Write ...

  9. cs服务器搭建（cobaltstrike）

    linux服务器中安装 1.因为cs这个工具需要用到Java环境,新装的linux系统没有Java环境,所以这里先装一下java环境 yum install -y java-1.8.0-openjdk ...

  10. 公子奇带你一步一步了解Java8中行为参数化

    说明:因为本公子一直从事监狱软件开发,所以本系列博客的引入也以此为背景.问题做了简化,只是为了来讲解技术点. 一.问题提出 今日在好好的撸着代码,超哥(民警)找来了,让把监狱30岁以上的民警找给他. ...