JavaScript get clipboard data on paste event (Cross browser)

Question

Is there any way for detecting the paste event AND getting the pasted data? Let's say at least for MSIE and Gecko.

MSIE has clipboardData.getData() but I did not find something similar for Mozilla/Gecko.

I need this for cleaning text (removing all HTML) before it gets pasted into a rich text editor.

Cleaning it afterwards works quite well, but the problem is that not only the pasted text is being cleaned. So if you write one sentence and apply some allowed formatting to it, e.g. make a word bold, and then paste a text, everything gets cleaned again. I want it to only clean the text pasted right now.

Answer 1

First that comes to mind is the pastehandler of google's closure lib http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html

Answer 2

Not directly. IE has had the paste event since 5.5, Firefox since 3.0. Getting the clipboard data directly is generally impossible.

What you can do is quite involved and a bit of a hack that will work in Firefox 2+, IE 5.5+ and recent WebKit browsers such as Safari 4 or Chrome (untested on older versions). Recent versions of both TinyMCE and CKEditor use this technique:

1. Detect a ctrl-v / shift-ins event using a keypress event handler
2. In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn designMode off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns designMode back on, restores the user selection and pastes the text in.

Note that this will only work for keyboard paste events and not pastes from the context or edit menus. By the time the paste event fires, it's too late to redirect the caret into the textarea (in some browsers, at least).

Note also that in Firefox 2 you'll need to place the textarea in the parent document rather than the WYSIWYG editor iframe's document.