js来监控复制粘贴
平时我们在复制网页上面代码到控制台调试时,有时会出现复制过来的代码后面加上了一下描述信息(作者、版权等信息),每次需要删除才能运行,所以今天看看怎么能保证我们粘贴的代码不携带这些信息呢?
(function() {
document.addEventListener('copy',(e)=>{
e.preventDefault();
e.stopPropagation();
console.info('触发复制事件');
/**
返回一个Selection对象,表示用户选择的文本范围或光标的当前位置
Selection.getRangeAt返回一个包含当前选区内容的区域对象
*/
let text = window.getSelection().getRangeAt(0);
let node = document.createElement('div');
// cloneContents方法把范围(Range)的内容复制到一个DocumentFragment对象
node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
/**
ClipboardEvent.clipboardData 属性保存了一个 DataTransfer 对象,这个对象可用于:
描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板,通常通过调用 setData(format, data) 方法;
获取由 paste 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法
*/
if(e.clipboardData){
e.clipboardData.setData("text/html", node.innerHTML);
e.clipboardData.setData("text/plain",text);
}else if(window.clipboardData){
return window.clipboardData.setData("text", text);
}
})
}());
js来监控复制粘贴的更多相关文章
- Cocos Creator JS web平台复制粘贴代码(亲测可用)
Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...
- fabric.js 翻转,复制粘贴,隐藏, 删除,历史记录,撤销, 剪切, 图层,组合打散,锁定等功能
用vue写的 显示,隐藏 hide(){ this.canvas.getActiveObject().set('opacity', 0).setCoords(); this.canvas.reques ...
- js 实现复制粘贴文本过滤(保留文字和图片)
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- js实现选择及复制粘贴
最近项目有个点击复制到粘贴板的需求,在这里做一个简单的例子分享给大家,没考虑兼容性,需要兼容的大家去查找下文档 //html<p id="element">测试测试&l ...
- js 复制粘贴功能记录
最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效
需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...
随机推荐
- GROUP BY 和 ORDER BY一起使用
转:http://lzfhope.blog.163.com/blog/static/636399220092554045196/ 环境:oracle 10g单单group by 或者order by本 ...
- srs(srs-librtmp推送h264原始数据)
1.下载最新srs源码 https://github.com/ossrs/srs/releases 2.编译(进入~/srs-2.0-r4/trunk目录) ./configure --with-li ...
- 详解Spark sql用户自定义函数:UDF与UDAF
UDAF = USER DEFINED AGGREGATION FUNCTION Spark sql提供了丰富的内置函数供猿友们使用,辣为何还要用户自定义函数呢?实际的业务场景可能很复杂,内置函数ho ...
- Linux修改信息
修改时间 sudo date -s MM/DD/YY //修改日期 sudo date -s hh:mm:ss //修改时间 在修改时间以后,修改硬件CMOS的时间 sudo hwclock --sy ...
- 微信js-sdk使用
<?php $appid=""; $secret=""; class JSSDK { private $appId; private $appSecret ...
- ReentrantLock的底层实现机制 AQS
ReentrantLock的底层实现机制是AQS(Abstract Queued Synchronizer 抽象队列同步器).AQS没有锁之类的概念,它有个state变量,是个int类型,为了好理解, ...
- Hexo博客配置笔记
安装Hexo npm install hexo-cli -g cd /blog hexo init 安装next主题 git clone https://github.com/iissnan/hexo ...
- thinkerCMS是一款thinkphp写的微型cms框架可以参考下
http://www.thinkphp.cn/code/1764.html thinkphp官网thinkercms介绍 http://cms.thinke ...
- linux卸载mysql
第二.停止MYSQL运行以及卸载老版本 service mysqld stop #暂停MYSQL yum remove mysql mysql-* #卸载老版本MYSQL 通过上面的命令,我们先停止 ...
- Tomcat的工作模式和运行模式
(1)工作模式 Tomcat作为servlet容器,有三种工作模式: 1.独立的servlet容器,servlet容器是web服务器的一部分: 2.进程内的servlet容器,servlet容器是作为 ...