Realize JS copy, paste, Chrome/firefox available

Background:

have been working on a web Excel project recently, 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 from Excel directly into the page editor. Support button Paste and Ctrl+c/ctrl+v shortcut key copy and paste.

This thought this function will be very simple, but check a lot of information, with JS operation paste board ie very easy to use, directly support a Window.clipboarddata object, through this object can access to the content of the pasteboard. But Chrome and Firefox support are not very good. Why does Chrome and Firefox not support a bit difficult to understand, in order to protect the system from external infringement?

Search on the Internet a lot of information, but most of the information is introduced in IE using Window.clipboarddata object to access the Clipboard implementation copy and paste, but only for IE development of a copy, paste function, very impractical; Of course there are other methods on the Internet, For example, through the indirect operation of Flash OS paste board, although there are such plug-ins, but also very bad use, only the user click the Copy button to line, but also not flexible.

later thought, many pages are forbidden copy, then through the browser event, is it possible to access to the pasteboard? After checking the information, Ie/chrome/firefox supports the Oncopy/onpaste/oncut event, although it is not supported on all elements. However, events in this event should be able to access what the user has copied and modify the data. Hands-on experiment, through Console.debug view Chrome and Firefox event object, you will find that there is a Clipboarddata object in the event, so the following things are not difficult. Look at the following Firefox will know:

Although Chrome and Firefox can get Clipboarddata objects through the event, be aware that under IE, the event object for copy and paste events does not have this object, So we also need to get clipboarddata through window, the final code is as follows:

Bind to the body or bind to other available element rows, but not all elements support copy and past events. $ (document.body). Bind ({copy:function (e) {//copy event var cptxt = "copied data"; var clipboarddata = Window.clipboarddata;//for Ieif (!clipboarddata) {//for chromeclipboarddata = E.originalevent.clipboarddata;} E.clipboarddata.getdata (' text ');//can get user selected copied data clipboarddata.setdata (' text ', cptxt); alert (cptxt); $ (' #message ') ). Text (' Copy Data: ' + cptxt); return false;//otherwise set does not take effect},paste:function (e) {//paste event var eve = E.originaleventvar cp = eve.c Lipboarddata;var data = Null;var Clipboarddata = window.clipboarddata; Ieif (!clipboarddata) {//chromeclipboarddata = E.originalevent.clipboarddata}data = Clipboarddata.getdata (' Text '); $ (' #message '). HTML (data);}});

By Clipboarddata the GetData and SetData methods, you can interact with the pasteboard. 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, next is to parse the "get" data from Excel. ( ^_^ )

Realize JS copy, paste, Chrome/firefox available