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

JavascriptJqueryEvent HandlingWebkit

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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

Try this, for instance

jQuery(document).on('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').on('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 Brandon Aaron's Mousewheel plugin

Solution 2 - Javascript

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.

Solution 3 - Javascript

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
   );

Solution 4 - Javascript

As jQuery 1.7 you can use bind(...) and unbind(...) methods for attaching and removing respectively handlers.

Here are examples align your questuion:

$('#someElementId').bind('paste', function(){return false;});
  • this one will block any attempts to paste from clipboard into element body. You can use also cut, copy and others as event types (see links bellow)

    $('#someElementId').bind('copy', function(){return alert('Hey fella! Do not forget about copyrights!');});

So, in other cases, when you want to remove those handlers, you can use unbind() method:

$('#someElementId').unbind('copy');

Here some useful links:

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndrew HedgesView Question on Stackoverflow
Solution 1 - JavascriptMár ÖrlygssonView Answer on Stackoverflow
Solution 2 - JavascriptdansaysView Answer on Stackoverflow
Solution 3 - JavascriptJosh BushView Answer on Stackoverflow
Solution 4 - JavascriptYan PakView Answer on Stackoverflow