js操作剪切板的內容，兼容ie、chrome、firefox

一、複製粘貼和剪切事件

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