To achieve JS copy, paste, Chrome/firefox available under

background:

has been doing a Web Excel project, one of the features has been very tangled, is the data copy and paste function. Functional Requirements: You can paste web-side data into Excel, or you can paste data directly from Excel into the page editor. button pasting and ctrl+c/ctrl+v shortcut keys are supported for copy and paste.

This thought this function will be very simple, but check a lot of data, with JS operation of the paste board ie very easy to use, directly support a Window.clipboarddata object, through this object can access to the contents of the Paste board. But Chrome and Firefox support are not very good. Why does Chrome and Firefox not support a bit hard to understand, in order to protect the system from foreign invasion.

Search on the Internet a lot of information, but most of the data are introduced under IE using Window.clipboarddata object access to the paste Board to achieve copy and paste, but alone for IE to develop a copy, paste function, very impractical; Of course, there are other ways on the Internet, For example, through the indirect operation of Flash OS paste board, although there are such plug-ins, but also very difficult to use, only users click the Copy button to do, but also not flexible.

Later thought, many pages are prohibited copy, then through the browser event, is not able to access to the paste board. Check the data, Ie/chrome/firefox support Oncopy/onpaste/oncut event, although not on all elements are supported. But here the event should have access to what the user has copied and modify data. Hands-on experiments, through the console.debug to see the Chrome and Firefox event object, will find an event inside a Clipboarddata object, so the things behind it is not difficult. See the following Firefox screenshot to know:

Although Chrome and Firefox can get Clipboarddata objects through event, note that under IE, the event object for the copy and paste events is not the object, So you also need to get clipboarddata through windows, and the final code is as follows:

Binds to the body or to other available element rows, but not all elements support the copy and past events.
$ (document.body). Bind ({
	copy:function (e) {//copy event
		var cptxt = "Replicated data";
		var clipboarddata = Window.clipboarddata; For IE
		if (!clipboarddata) {//for chrome
			clipboarddata = E.originalevent.clipboarddata;
		}
		E.clipboarddata.getdata (' text ');//You can get the data that the user selected to copy
		clipboarddata.setdata (' text ', cptxt);
		alert (cptxt);
		$ (' #message '). Text (' Copy Data: ' + cptxt);
		Return false;//otherwise set not to take effect
	},paste:function (e) {//paste event
		var eve = e.originalevent
		var cp = Eve.clipboarddata;
		var data = null;
		var clipboarddata = Window.clipboarddata; IE
		if (!clipboarddata) {//chrome
			clipboarddata = e.originalevent.clipboarddata
		}
		data = Clipboarddata.getdata (' Text ');
		$ (' #message '). HTML (data);
	}
);

You can interact with the pasteboard by clipboarddata the GetData and SetData methods. Also note that GetData and SetData only accept text and URL two control parameters, generally with the text parameter is enough.

OK, the above can "control" the Pasteboard data, the next step is to parse the "get" data from Excel. ( ^_^ )