平时我们在复制网页上面代码到控制台调试时,有时会出现复制过来的代码后面加上了一下描述信息(作者、版权等信息),每次需要删除才能运行,所以今天看看怎么能保证我们粘贴的代码不携带这些信息呢?

(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来监控复制粘贴的更多相关文章

  1. Cocos Creator JS web平台复制粘贴代码(亲测可用)

    Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...

  2. fabric.js 翻转,复制粘贴,隐藏, 删除,历史记录,撤销, 剪切, 图层,组合打散,锁定等功能

    用vue写的 显示,隐藏 hide(){ this.canvas.getActiveObject().set('opacity', 0).setCoords(); this.canvas.reques ...

  3. js 实现复制粘贴文本过滤(保留文字和图片)

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  4. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  5. js实现选择及复制粘贴

    最近项目有个点击复制到粘贴板的需求,在这里做一个简单的例子分享给大家,没考虑兼容性,需要兼容的大家去查找下文档 //html<p id="element">测试测试&l ...

  6. js 复制粘贴功能记录

    最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...

  7. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  8. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  9. 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

随机推荐

  1. GROUP BY 和 ORDER BY一起使用

    转:http://lzfhope.blog.163.com/blog/static/636399220092554045196/ 环境:oracle 10g单单group by 或者order by本 ...

  2. srs(srs-librtmp推送h264原始数据)

    1.下载最新srs源码 https://github.com/ossrs/srs/releases 2.编译(进入~/srs-2.0-r4/trunk目录) ./configure --with-li ...

  3. 详解Spark sql用户自定义函数:UDF与UDAF

    UDAF = USER DEFINED AGGREGATION FUNCTION Spark sql提供了丰富的内置函数供猿友们使用,辣为何还要用户自定义函数呢?实际的业务场景可能很复杂,内置函数ho ...

  4. Linux修改信息

    修改时间 sudo date -s MM/DD/YY //修改日期 sudo date -s hh:mm:ss //修改时间 在修改时间以后,修改硬件CMOS的时间 sudo hwclock --sy ...

  5. 微信js-sdk使用

    <?php $appid=""; $secret=""; class JSSDK { private $appId; private $appSecret ...

  6. ReentrantLock的底层实现机制 AQS

    ReentrantLock的底层实现机制是AQS(Abstract Queued Synchronizer 抽象队列同步器).AQS没有锁之类的概念,它有个state变量,是个int类型,为了好理解, ...

  7. Hexo博客配置笔记

    安装Hexo npm install hexo-cli -g cd /blog hexo init 安装next主题 git clone https://github.com/iissnan/hexo ...

  8. thinkerCMS是一款thinkphp写的微型cms框架可以参考下

    http://www.thinkphp.cn/code/1764.html                       thinkphp官网thinkercms介绍 http://cms.thinke ...

  9. linux卸载mysql

    第二.停止MYSQL运行以及卸载老版本 service mysqld stop #暂停MYSQL yum remove mysql mysql-*  #卸载老版本MYSQL 通过上面的命令,我们先停止 ...

  10. Tomcat的工作模式和运行模式

    (1)工作模式 Tomcat作为servlet容器,有三种工作模式: 1.独立的servlet容器,servlet容器是web服务器的一部分: 2.进程内的servlet容器,servlet容器是作为 ...