JS监听复制、粘贴、剪贴

最新推荐文章于 2024-05-24 16:11:26 发布
最新推荐文章于 2024-05-24 16:11:26 发布
阅读量7.6k 收藏 8
点赞数 4
分类专栏： JavaScript 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43371145/article/details/109028638
版权

本文介绍 js监听 复制 粘贴 剪贴 的使用方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box" contenteditable="true" style="width:600px;min-height:300px;text-align:justify ;margin:100px auto;border: 1px solid orange;">文字在有些时候，恰恰会是我们认识这个世界的无形障碍。所以你以后读书的时候，不要时时刻刻都去咬文嚼字，若是遇到了瓶颈，不妨先退一步，再登高数步，尽量往高处走一走，不登山峰，不显平地。
    </div>
    <div id="tip" style="width:600px;min-height: 200px;margin: 20px auto;border:1px solid #ddd;"></div>
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script>
    	//粘贴
		document.querySelector('#box').addEventListener('paste', (e) => {
		    // 防止默认的粘贴事件和停止冒泡
		    e.preventDefault();
		    e.stopPropagation();
		
		    // 获取剪贴板数据
		    let paste = (e.clipboardData || window.clipboardData).getData('text/html');
		
		    // 做一些粘贴，如删除非utf -8字符
		    paste = paste.replace(/style/gi, 'data-style');
		
		    // 找到光标位置或突出显示的区域
		    const selection = window.getSelection();
		
		    // 如果没有找到光标或突出显示的区域，则取消粘贴操作
		    if (!selection.rangeCount) return false;
		    var div = document.createElement("div");
		    div.innerHTML = paste;
		    // 将修改后的剪贴板内容粘贴到预期的位置
		    selection.getRangeAt(0).insertNode(div);
			console.log(paste);
		    $("#tip").html(paste)
		});
		
		//复制(在测试的时候 复制和粘贴不能一起测试,不然在粘贴的时候会没有内容,原因可能是在复制的时候 event.preventDefault() 方法阻止了默认行为导致剪贴板上的内容不存在了 )
		//event.preventDefault() 阻止默认行为
		//event.stopPropagation() 阻止冒泡
		document.querySelector('#box').addEventListener('copy', (event) => {
			debugger;
			const selection = document.getSelection();
			event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
			event.preventDefault();
			event.stopPropagation();
			let copy = (event.clipboardData || window.clipboardData).getData('text/plain');
			copy = copy.replace(/style/gi, 'data-style');
			$("#tip").html(copy)
		});
		
		//剪贴
		document.querySelector('#box').addEventListener('cut', (event1) => {
			debugger;
			const selection = document.getSelection();
			event1.clipboardData.setData('text/plain', selection.toString().toUpperCase());
			document.getSelection().deleteFromDocument();
			event1.preventDefault();
			event1.stopPropagation();
			let cut = (event1.clipboardData || window.clipboardData).getData('text/plain');
			cut = cut.replace(/style/gi, 'data-style');
			$("#tip").html(cut)
		});
		
		
    </script>
</body>

</html>

参考博客: https://blog.csdn.net/bluelotos893/article/details/81586699
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event

番茄和蛋
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于js粘贴事件paste简单解析以及遇到的坑
10-19
下面小编就为大家带来一篇基于js粘贴事件paste简单解析以及遇到的坑。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js剪贴板功能，可以实现复制粘贴
07-13
在Web应用中，复制和粘贴功能是常见的用户交互需求，而JS剪贴板功能就是用来满足这一需求的关键技术。本文将深入探讨如何使用JavaScript实现剪贴板的复制和粘贴功能。 ### 1. 剪贴板API的发展历程 早期的JS剪贴板...
html文本框监听粘贴,JavaScript实现复制粘贴
weixin_29974217的博客
06-03 662
有个很常见的生活场景是：我们在网页上阅读一篇文章，移动鼠标，框选一段文字，这个时候文字有了蓝色背景，点鼠标右键，选择复制，就可以把选中的文字复制到剪贴板中。 其实这一小小的行为在 JavaScript 中涉及到如下一些术语：相关术语锚点(anchor)锚点指的是一个选区的起始点，这里的锚点不同于HTML中的锚点链接。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标...
autoxjs获取剪贴板内容
最新发布
u的博客
05-24 458
autoxjs获取剪贴板内容，autoxjs粘贴板，autoxjs获取复制内容，autox获取剪切板
js【剪切、复制、粘贴】功能实现
huangpb的博客
03-21 2486
针对现代浏览器实现（Navigator.clipboard） Navigator.clipboardAPI可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE。 使用 Navigator.clipboardAPI时会弹出用户授权弹窗。如果用户没有授予权限，则不允许读取或更改剪贴板内容。 let clipBoard = navigator.clipboard; // 写入文本至操作系..
【前端】js监听粘贴事件 获取到粘贴的图片展示并上传
我是Superman丶的博客
11-10 1103
要在JavaScript中监听粘贴事件、获取粘贴的图片并展示，以及上传图片，你可以使用以下代码作为起点。请注意，这里使用了一个简单的HTML结构，你可能需要根据你的应用程序的需求进行适当的修改。读取图片数据，并在页面上展示图片。在展示图片的同时，你可以执行上传操作，将图片上传到服务器。如果你想通过文件选择器上传图片，也提供了相应的代码。事件，检查粘贴板中的每一项是否是图片。如果是图片，我们使用。【前端】js监听粘贴事件 获取粘贴的图片。js 监听粘贴事件 拿到图片 展示并上传。这个例子中，我们监听了。
javascript 剪贴板数据
迹忆客
06-29 1180
本篇文章将介绍在 JavaScript 中检测粘贴事件上的剪贴板数据。
js实现监听ctrl+v粘贴事件获取复制的内容，并把截取的图片转base64
DavidZhao的博客
05-08 431
在 JavaScript 中，可以通过添加 'paste' 事件监听器来监听粘贴事件。
监听粘贴获取图片类型的文件
weixin_44571544的博客
02-03 888
vue ctrl v 粘贴 文本框，获取图片类型的文件信息
js监听浏览器剪贴板
weixin_30690833的博客
07-21 545
function setClipboardText(event){ event.preventDefault(); var node = document.createElement('div'); node.innerHTML= window.getSelection(0).toString(); var result = window...
手机移动端 js复制粘贴.zip
02-26
在移动设备上，JavaScript（简称JS）经常被用于实现各种用户交互功能，其中包括复制和粘贴文本。在“手机移动端 js复制粘贴.zip”压缩包中，提供的资源可以帮助开发者实现这个功能，尤其对于那些需要在触摸屏设备上...
JS 巧妙获取剪贴板数据 Excel数据的粘贴
10-29
在JavaScript中，获取剪贴板数据一直是个棘手的问题，因为出于安全考虑，浏览器对剪贴板的操作进行了严格的限制。然而，在某些特定场景下，比如在网页中实现Excel数据的粘贴，这种功能是必要的。这里我们将探讨一种...
JS 实现复制粘贴
04-27
在JavaScript的世界里，复制和粘贴功能通常是网页交互中的重要组成部分。`clipboard.js`是一个轻量级的库，专门用于简化这个过程。本篇文章将详细探讨如何使用`clipboard.js`来实现在网页上的复制粘贴功能，以及相关...
js复制剪贴板插件.zip
05-23
总的来说，"js复制剪贴板插件.zip"提供的Clipboard.js库极大地简化了JavaScript中复制文本到剪贴板的操作，且具备良好的跨浏览器兼容性。无论是开发简单网页应用还是复杂的单页应用，它都是一个非常实用的工具。
原生JS监听复制事件，更改复制的内容，或者在复制内容后面追加参数，原生JS控制按钮点击复制自定义内容，复制想要让复制的内容
06-19 7290
原生 JS 监听 复制 copy 事件，追加版权信息 <div class="empty-font">空心字</div> <script type="text/javascript"> //监听整个页面的 copy 事件 document.addEventListener('copy',function(e){ // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容 let clipboardD
粘贴事件（js监听粘贴事件）
热门推荐
Leaves_Yu的博客
03-09 1万+
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body,html{ text-align: center; } #editDiv{ width:1000px
js 获取剪切板内容
我见青山多妩媚,料青山见我应如是
09-15 5246
js 获取剪切板内容
js 判断剪切板内容是否为text_js监听浏览器剪贴板
weixin_39882870的博客
01-14 292
function setClipboardText(event){event.preventDefault();var node = document.createElement('div');node.innerHTML= window.getSelection(0).toString();var result = window.getSelection(0).toString();if (re...
vue novnc的复制粘贴
12-21
根据引用[1]中提供的API文档，noVNC库本身并没有提供直接的复制粘贴功能。然而，你可以通过在noVNC中使用Clipboard.js库来实现复制粘贴功能。下面是一个示例代码，演示了如何在Vue中使用noVNC和Clipboard.js来实现复制粘贴功能： 首先，确保你已经在项目中安装了noVNC和Clipboard.js库。 ```vue <template> <div> <div ref="vncContainer"></div> <button @click="copyToClipboard">复制</button> <button @click="pasteFromClipboard">粘贴</button> </div> </template> <script> import noVNC from 'novnc-core'; import ClipboardJS from 'clipboard'; export default { mounted() { // 创建noVNC实例 const vnc = noVNC.createClient(); vnc.mount(this.$refs.vncContainer); // 连接到VNC服务器 vnc.connect('ws://your-vnc-server-url'); // 初始化Clipboard.js const clipboard = new ClipboardJS('.copy-btn'); // 监听复制成功事件 clipboard.on('success', () => { console.log('复制成功'); }); // 监听粘贴成功事件 clipboard.on('paste', () => { console.log('粘贴成功'); }); }, methods: { copyToClipboard() { // 将文本复制到剪贴板 const text = '要复制的文本'; const input = document.createElement('input'); input.value = text; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); }, pasteFromClipboard() { // 从剪贴板中获取文本 const text = navigator.clipboard.readText(); text.then((content) => { console.log('从剪贴板中获取到的文本：', content); }); }, }, }; </script> ``` 上述代码中，我们首先在Vue组件中创建了一个noVNC实例，并将其挂载到一个容器元素上。然后，我们初始化了Clipboard.js，并在复制和粘贴按钮上添加了相应的点击事件处理函数。在复制按钮的点击事件处理函数中，我们使用`document.execCommand('copy')`将指定的文本复制到剪贴板。在粘贴按钮的点击事件处理函数中，我们使用`navigator.clipboard.readText()`从剪贴板中获取文本内容。 请注意，上述代码只是一个示例，你需要根据你的具体需求进行适当的修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值