原生JS在网页上复制的所有文字后面自动加上一段版权声明
不少技术博客有这样的处理，当我们复制代码的时候，会自动加上一段本信息版权为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表示要添加到剪切板的数据。
- 获取由
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事件 ...
随机推荐
- 2018-8-10-git-提交添加-emoij-文字
title author date CreateTime categories git 提交添加 emoij 文字 lindexi 2018-08-10 19:16:52 +0800 2018-2-1 ...
- [转]C#操作Word的超详细总结
本文中用C#来操作Word,包括: 创建Word: 插入文字,选择文字,编辑文字的字号.粗细.颜色.下划线等: 设置段落的首行缩进.行距: 设置页面页边距和纸张大小: 设置页眉.页码: 插入图片,设置 ...
- P1057 迷宫路径
题目描述 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, ...
- H3C DHCP租约更新
- P1035 台阶问题二
题目描述 有 \(N\) 级的台阶,你一开始在底部,每次可以向上迈最多 \(K\) 级台阶(最少 \(1\) 级),问到达第 \(N\) 级台阶有多少种不同方式. 输入格式 两个正整数 \(N, K( ...
- Linux 内核
在接口总线领域的最新的一项是外部总线的整个类. 这包括 USB, 固件, 和 IEEE1284(基 于并口的外部总线). 这些接口有些类似于老的非外部的技术, 例如 PCMCIA/CardBus 和 ...
- 微软软件开发技术二十年回顾-MFC篇
三. MFC篇 Windows API是面向过程的接口,因此对于当时的编程技术来说,它是完美无缺的.但是,随着人们逐渐使用C++进行Windows程序的开发,迫切需要建立与Windows API的面向 ...
- Windows 服务安装与卸载 （通过 Sc.exe）
1. 安装 新建文本文件,重命名为 ServiceInstall.bat,将 ServiceInstall.bat 的内容替换为: sc create "Verity Platform De ...
- MYSQL 查询日期最大的那条记录
首先把官网示例拿出来: 连接查询比子查询性能更好 3.6.4 The Rows Holding the Group-wise Maximum of a Certain Column Task: For ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...