Get clipboard data

Question

I am trying to write a Javascript function to edit contents from a clipboard before pasting. Right now, I got the associated 'paste' event to work through jQuery.

$(this.elementDoc).bind('paste', function(event){ self.OnPaste(event); }); 

But it is not important. Now I would like to receive data from the clipboard, but I can not figure out how to do this. I would be happy for every hint.

Answer 1

It's hard. If I remember correctly, IE allows access to the buffer, but by default Firefox has no security issues. I had to do this for the project I was working on, and was forced to use a small SWF file that was doing the copying.

http://www.jeffothy.com/weblog/clipboard-copy/

Answer 2

clipboardData can contain data in various potential formats. Its possible program will add clipboard data in several formats. To view formats, browse clipboardData.types .

Often the clipboard data contains plain text, and the first type specified in types will be the MIME type "text / plain". If you copy text from tho browser, you will see two types in the list: "text / plain" and "text / html". Depending on which line you go to getData , you may grab plain text or html. It seems that "text" is short for "text / plain", and "url" is short for "text / uri-list".

 element.addEventListener('paste', function(event) { var cb = event.clipboardData if(cb.types.indexOf("text/html") != -1) { // contains html var pastedContent = cb.getData("text/html") } else if(cb.types.indexOf("text/html") != -1) { // contains text var pastedContent = cb.getData("text/html") } else { var pastedContent = cb.getData(cb.types[0]) // get whatever it has } // do something with pastedContent }) 

For more on how to use clipboardData.getData , see the ugly spec .

Answer 3

Here's how to get it from IE or from Chrome. First, it prevents the actual paste, then performs a function check, and then sets the text of the variable to the text of the clipboard. With this, you can manipulate the text and then set it as the value for the input / element to insert or something else that you want to do with it.

 //get clipboard text event.preventDefault(); var text = null; if (window.clipboardData) text = window.clipboardData.getData("Text"); else if (event.originalEvent && event.originalEvent.clipboardData) text = event.originalEvent.clipboardData.getData("Text"); //manipulate the text text = '..do stuff with it..'; //set the text $(this).val(text);