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

(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. Apache http server linux 安装过程说明

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sundenskyqq/article/details/24733923 PS:Apache http ...

  2. 008-Shell 流程控制

    一.if else 1.1.if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): ]; ...

  3. node.js---sails项目开发

    http://sailsdoc.swift.ren/ 这里有 sails中文文档 node.js---sails项目开发(1)安装,启动sails node.js---sails项目开发(2)安装测试 ...

  4. tp5中nginx配置

    首先tp5的访问目录指向到webroot/public文件夹中. thinkphp的url访问:http://serverName/index.php(或者其它应用入口文件)/模块/控制器/操作/[参 ...

  5. springboot使用tomcat apr模式

    因需项目对并发要求比较高.提高Tomcat效率.使用tomcat apr模式.今天在这记录下使用过程.apr全称为apache portable runtime.这里套用下wiki对apr的解释. T ...

  6. 浅析selenium的PageFactory模式 PageFactory初始化pageobject

    1.首先介绍FindBy类: For example, these two annotations point to the same element: @FindBy(id = "foob ...

  7. WooCommerce Shortcode 简码使用方式说明

    WooCommerce 自帶的几个简易代码,可以用来插入文章和页面內容里面.下面简码安裝时会自动建立,因此,应该不需要使用在其他地方 : [woocommerce_cart] – 顯示購物車頁面 [w ...

  8. 为什么mysql innodb索引是B+树数据结构

    1.文件很大,不可能全部存储在内存中,所以要存在磁盘上 2.索引的组织结构要尽量减少查找过程中磁盘I/O的存取次数(为什么用B-/+Tree,还跟磁盘存取原理有关) 3.B+树所有的data域在叶子节 ...

  9. bash 获取时间段内的日志内容

    需求,获取时段内的/var/log/messages文件内出现错误的消息,支持多行的消息,支持天,小时分钟,秒级的区间,可以修改监控的日志对象 #!/bin/bash if [ $# != 1 ] ; ...

  10. java获得两个日期之间的所有月份

    private static List<String> getMonthBetween(String minDate, String maxDate) throws ParseExcept ...