How do you handle oncut, oncopy, and onpaste in jQuery?

Question

The jQuery documentation says the library has built-in support for the following events: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error.

I need to handle cut, copy, and paste events. How best to do that? FWIW, I only need to worry about WebKit (lucky me!).

UPDATE: I'm working on a "widget" in a Dashboard-like environment. It uses WebKit, so it only really matters (for my purposes) whether these events are supported there, which it looks like they are.

Answer 1

I don't believe that these events are available. (I have yet to see them)

Your best bet is likely to listen for key events of CTRL+X|C|V but this won't help you if the user right clicked and chose from the context menu, or from the applications edit menu. (e.g. on windows, adjust accordingly if on Mac)

Answer 2

Various clipboard events are available in Javascript, though support is spotty. QuicksMode.org has a compatibility grid and test page. The events are not exposed through jQuery, so you'll either have to extend the library or use native Javascript events.

Answer 3

In researching a bit for this answer, I found that IE has support for reading from the clipboard in JavaScript (!!) via window.clipboardData. Firefox doesn't, thankfully. I doubt Webkit does either, being sane.

Are you sure that you really need to handle cut/copy/paste commands? Perhaps you are approaching the problem from the wrong perspective. If you edit your answer to provide the reason behind your request, perhaps I or someone else can give you more help.

Answer 4

You can add and remove events of any kind by using the .bind() and unbind() methods

Try this, for instance

jQuery(document).bind('paste', function(e){ alert('pasting!') })

jQuery is actually quite indifferent to whether the event type you assign is supported by the browser, so you can assign arbitrary event types to elements (and general objects) such as:

jQuery('p').bind('foobar2000', function(e){ alert(e.type); });

In case of custom event types, you must .trigger() them "manually" in your code, like this:

jQuery('p').trigger('foobar2000');

Neat eh?

Furthermore, to work with proprietary/custom DOM events in a cross-browser compatible way, you may need to use/write an "jQuery event plugin" ... example of which may be seen in jquery.event.wheel.js

Answer 5

Mozilla supports an "input" event which I'm having trouble finding useful documentation for. At the very least, I know it fires on paste.

   this.addEventListener('input',
    function(){//stuff here},
    false
   );