效果示例 :

代码示例：

<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在网页上复制的所有文字后面自动加上一段版权声明的更多相关文章

JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
使用原生JS定位网页元素
约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw&qu ...
使用js在网页上记录鼠标划圈的小程序
Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...
利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
原生js实现文件上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js解决网页无法复制文字的问题
碰到有些网站,站长禁止了右键,或者用其它方法不让复制网页的文字,弄的好烦人啊,虽然这是小把戏,但多多少少造成了一些不方便,前几天发现这个解决不能复制问题的小方法,一行代码即搞定,就是下面这行: jav ...
原生JS实现图片上传并预览功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生JS获取网页宽高
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
原生js实现网页触屏滑动
前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

随机推荐

4-4 Selector有一个方法可以获取Selector中的文本内容---extract()
####### 例如: response.xpath('//div[@class ="entry-header"]/h1/text()').extract()
P1037 最小公倍数
题目描述给你两个正整数A和B,求它们的最小公倍数. 输入格式两个正整数 $A,B(1 \le A,B \le 10^9)$ . 输出格式一个整数,表示A和B的最小公倍数. 样例输入 6 8 ...
linux一个进程如何睡眠
如果我们深入 <linux/wait.h>, 你见到在 wait_queue_head_t 类型后面的数据结构是非常简单的; 它包含一个自旋锁和一个链表. 这个链表是一个等待队列入口, ...
javascript异步编程 Async/await
Async/await Async/await 在学习他之前应当补充一定的 promise 知识它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案值得我们每一个人学习 ...
jquery ajax请求步骤
$.ajax({ type: "GET", url: "/alink-hq/checkCode", data: { "mobile": ph ...
2019-8-31-How-to-fix-nuget-Unrecognized-license-type-MIT-when-pack
title author date CreateTime categories How to fix nuget Unrecognized license type MIT when pack lin ...
dotnet core 用值初始化整个数组
如果想要创建一个数组,在这个数组初始化一个值,有多少不同的方法? 本文告诉大家三个不同的方法初始化在开发中,会不会用很多的时间在写下面的代码 var prime = new bool[1000]; ...
logisim自动生成电路
之前再做有关logisim有关的实验时,一直在傻乎乎地连线,而我是看了mooc有关的视频时,才知道logisim有自动连线的功能. 自动连线需要事先知道输入与输出的真值表或者全部的表达式,将其填入lo ...
VIM 用正则表达式,非贪婪匹配,匹配竖杠,竖线, 匹配中文,中文正则,倒数第二列, 匹配任意一个字符 :
VIM 用正则表达式批量替换文本,多行删除,复制,移动在VIM中用正则表达式批量替换文本,多行删除,复制,移动 :n1,n2 m n3 移动n1-n2行(包括n1,n2)到n3行之下: ...
FreeNOS学习3——了解目录结构和Main函数
下载源码的文件夹,看到里面有以下内容: 解释一下里面都有啥 lib -> 共享代码 1.libfs 文件系统(磁盘管理) 2.liballoc 内存分配和虚拟内存映射(内存管理) 3.libex ...

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