admin管理员组

文章数量:1562641

本文介绍 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/bluelotos893/article/details/81586699
https://developer.mozilla/en-US/docs/Web/API/Element/paste_event
https://developer.mozilla/en-US/docs/Web/API/Element/copy_event
https://developer.mozilla/en-US/docs/Web/API/Element/cut_event

本文标签： js

版权声明：本文标题：JS监听复制、粘贴、剪贴 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727480491a1116767.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。