原生JS在网页上复制的所有文字后面自动加上一段版权声明
时间:2022-07-24
本文章向大家介绍原生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 + 'nn张无忌 版权所有');
}
});
</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 的链接
如果有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家
- zookeeper的python客户端安装
- 事件(Event),绝大多数内存泄漏(Memory Leak)的元凶[上篇]
- 震撼:1分钟带你看完IC0的爆炸视频
- 事件(Event),绝大多数内存泄漏(Memory Leak)的元凶[下篇] (提供Source Code下载)
- bt、磁力怎么下载?老司机飙车终极思路……
- Linux进程间通信(五) - 信号灯(史上最全)及其经典应用案例
- 写出完美的snprintf
- 计算CPU利用率
- 详解Hadoop HA 如何运作
- Linux时间时区详解与常用时间函数
- 基于Linux整形时间的常用计算思路
- 如何追踪每一笔记录的来龙去脉:一个完整的Audit Logging解决方案[上篇]
- WCF技术剖析之二十四: ServiceDebugBehavior服务行为是如何实现异常的传播的?
- Linux64位程序移植
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP扩展mcrypt实现的AES加密功能示例
- PHP PDOStatement::bindColumn讲解
- PHP PDOStatement::fetchAll讲解
- PHP PDOStatement::bindParam讲解
- PHP date()格式MySQL中插入datetime方法
- Python sklearn中的.fit与.predict的用法说明
- 基于python实现ROC曲线绘制广场解析
- Python建造者模式案例运行原理解析
- PHP PDOStatement::errorInfo讲解
- PDO::setAttribute讲解
- Yii2.0建立公共方法简单示例
- PHP PDOStatement::execute讲解
- 详解用Python爬虫获取百度企业信用中企业基本信息
- PHP连接及操作PostgreSQL数据库的方法详解
- 使用Keras建立模型并训练等一系列操作方式