浏览器复制、剪切、粘贴事件简单操作示例

2023-09-25 20:30:46

更多参考:点这里

复制、剪切、粘贴事件：

copy 发生复制操作时触发;
cut 发生剪切操作时触发;
paste 发生粘贴操作时触发;

每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste;
这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。

copy复制操作:

copy事件使用示例：

<body>
	gggwgzgf
</body>
<script type="text/javascript">
	document.body.oncopy = e => {
	  // 监听全局复制 做点什么
	  console.log(e)
	};
</script>

我们可以看到事件对象中的属性：

我们主要研究的是里面的clipboardData属性对象

clipboardData 对象: 用于访问以及修改剪贴板中的数据
clipboardData对象中有两个方法：

setData():常配合copy事件使用，用于设置到剪贴板中的值

getData():常配合paste事件使用，用于获取设置到剪贴板中的值

不同浏览器，所属的对象不同：在 IE
中这个对象是window对象的属性，在Chrome、Safari和Firefox中，这个对象是相应的event对象的属性。所以我们在使用的时候，需要做一下如下兼容:

document.body.oncopy = e => {
  let clipboardData = e.clipboardData || window.clipboardData;
  // 获取clipboardData对象 + do something
};

copy配合getSelection实现复制某段文本

<body>
		gggwgzgf
	</body>
	<script type="text/javascript">
		document.body.oncopy = e => {
			console.log(window.getSelection().toString())
			let copyMsg = window.getSelection().toString()
			//把值设置到剪贴板中，方便paste事件触发去拿
			e.clipboardData.setData("Text", copyMsg);
		};
	</script>

注意：window.getSelection().toString()我是调用toString()方法转成文本的，如果不调用这个方法，直接通过window.getSelection()取到值存到剪贴板会有出奇的效果，会连同效果一起粘贴(比如html格式的,会隐性地把<body>什么都复制进去)，需要配合paste事件

paste粘贴事件

<body>
		gggwgzgf
		<input placeholder="这里存放粘贴操作的值" />
	</body>
	<script type="text/javascript">
		document.body.oncopy = e => {
			console.log(window.getSelection().toString())
			let copyMsg = window.getSelection().toString()
			e.clipboardData.setData("Text", copyMsg);
		};
		
		document.body.onpaste=function(e){
				var data = e.clipboardData.getData("Text")
				document.querySelector("input").value = data
			}
	</script>

通过patse事件获取剪切板中的图片：

<script type="text/javascript">
		document.addEventListener('paste', function(event) {
			var items = (event.clipboardData && event.clipboardData.items) || [];
			var file = null;
			if(items && items.length) {
				for(var i = 0; i < items.length; i++) {
					if(items[i].type.indexOf('image') !== -1) {
						file = items[i].getAsFile();
						break;
					}
				}
			}
			console.log(file)
		});
</script>

解释： 当粘贴事件触发时遍历剪切版对象（clipboardData）中的所有items，找到类型为图片的item并调用getAsFile方法得到文件对象

拿到file 对象后我们有几种选择：

通过fileReader得到文件对象的base64字符串

var reader = new FileReader();
reader.onload = function(e){
// 通过e.target.result取到base64然后上传
// 作为src设到image标签上预览
}
reader.readAsDataURL(file); //此处的file为上面得到的文件对象```

通过formData文件对象转换为二进制数据

var formData = new FormData();
formData.append('file', file);

通过 URL.createObjectURL转成url地址预览

var blobUrl=URL.createObjectURL(file)

示例代码：

<body>
		<img src="" id="imgTest" />
	</body>
	<script type="text/javascript">
		document.addEventListener('paste', function(event) {
			var items = (event.clipboardData && event.clipboardData.items) || [];
			var file = null;
			if(items && items.length) {
				for(var i = 0; i < items.length; i++) {
					if(items[i].type.indexOf('image') !== -1) {
						file = items[i].getAsFile();
						break;
					}
				}
			}
			var blobUrl = URL.createObjectURL(file);
			document.getElementById("imgTest").src = blobUrl;
		});
	</script>

局限性：
对于qq，微信等的截图或者按print screen得到的截图，还有任意网页的右击复制图片都能完美支持，但是，对于电脑本地图片文件的复制没办法从剪切版获取到

码农公寓

复制、剪切、粘贴事件：

copy复制操作:

paste粘贴事件

相关文章