一、复制粘贴和剪切事件
IE,firefox,chrome浏览器都有剪切板事件( ClipboardEvent):oncopy复制,onpaste粘贴,oncut剪切.
当需要禁止这些行为时,只需要在这些绑定事件中return false;即
<input oncopy = "return false;"/> <input onpaste = "return false;"/> <input oncut = "return false;"/>二、操作剪切板
在复制粘贴事件处理中,很多时候我们都需要操作剪切板的内容,剪切板是系统层面的东西,JS如何操作剪切板?
1.IE下,直接支持一个window.clipboardData对象,通过这个对象可以访问到粘贴板中内容。
2.chrome和firefox,在oncopy/onpaste/oncut事件对象event中有一个clipboardData对象,而在IE的事件中是没有这个对象的
关于这个对象,官方是这样介绍的:
ClipboardEvent.clipboardData 属性保存了一个 DataTransfer 对象,这个对象可用于:
描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板,通常通过调用 setData(format, data) 方法;获取由 paste 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法也就是说,这个对象提供了两个方法 setData(format, data)、getData(format)分别进行修改和获取接切板的内容。
因此,兼容这三者的做法:
//绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy和past事件。 $(document.body).bind({ copy: function(e) { var cpTxt = "修改剪切板的内容"; var clipboardData = window.clipboardData; //for IE if (!clipboardData) { // for chrome or firefox clipboardData = e.originalEvent.clipboardData; } clipboardData.setData('Text', cpTxt); e.preventDefault();//必须取消默认行为,否则setData设置失效 }, paste: function(e) { var clipboardData = window.clipboardData; if (!clipboardData) { clipboardData = e.originalEvent.clipboardData } data = clipboardData.getData('Text'); $('#message').html(data); } });
三、在网上查资料的时候,发现有个插件,对于在复制粘贴时有大量的操作的可以试用看看
https://github.com/zenorocha/clipboard.js
参考文章:https://blog.csdn.net/hackersaillen/article/details/45694181
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent/clipboardData