JS监听复制、粘贴、剪贴

本文介绍 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

JS监听复制、粘贴、剪贴相关推荐

js 监听复制图片拖拽上传文件并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求生成markdown 语句实现逻辑代码(主要实现) 后端代码效果获取粘贴的文件 const { clipboardData } = e; ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
js监听audio播放完毕
js监听audio播放完毕 <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
vue 组件属性监听_Vue.js 监听属性
# Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: ~~~ Vue 测试实例 - 菜鸟教程(runoob.com) ...
使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
js监听iframe是否加载完毕
js监听iframe是否加载完毕代码片. //初始化加载var a = document.getElementById(iframe的id);var iframeLoad = function () ...
js监听浏览器tab页面变化
js监听浏览器tab页面变化引言今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...

JS监听复制、粘贴、剪贴

JS监听复制、粘贴、剪贴相关推荐

最新文章

热门文章