前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用

最新推荐文章于 2024-04-30 10:32:15 发布

codingWeb

最新推荐文章于 2024-04-30 10:32:15 发布

阅读量1.4w

点赞数 23

分类专栏：前端 js 文章标签：前端剪贴板复制粘贴 javascript js剪贴板操作

本文链接：https://blog.csdn.net/fesfsefgs/article/details/111875639

版权

最近的项目上需要做复制粘贴相关的操作，来总结下吧

复制、剪切、粘贴事件：

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

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

触发条件:

鼠标右键菜单的复制、粘贴、剪切;
使用了相应的键盘组合键，比如:ctrl+c、ctrl+v;

复制操作：

copy事件使用示例：

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

在这里插入图片描述
我们可以看到事件对象中的属性：

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

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

getData():常配合copy事件使用，用于设置到剪贴板中的值
setData():常配合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>

为了方便，这次，我直接使用ctrl+c测试了
在这里插入图片描述

注意：window.getSelection().toString()我是调用toString()方法转成文本的，如果不调用这个方法，直接通过window.getSelection()取到值存到剪贴板会有出奇的效果，后面会说到，需要配合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

最低0.47元/天解锁文章

codingWeb

关注

23
点赞
踩
64

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用

最近的项目上需要做复制粘贴相关的操作，来总结下吧复制、剪切、粘贴事件：copy 发生复制操作时触发;cut 发生剪切操作时触发;paste 发生粘贴操作时触发;每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste;这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。触发条件:鼠标右键菜单的复制、粘贴、剪切;使用了相应的键盘组合键，比如:ctrl+c、ctrl+v;复制操作：copy事件使用示例：&lt
复制链接

扫一扫