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

javascript jquery event-handling webkit
Andrew Hedges picture Andrew Hedges · Oct 26, 2008 · Viewed 77.2k times · Source

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

Már Örlygsson picture Már Örlygsson · Oct 27, 2008

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

Related questions

jQuery checkbox change and click event

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation. This leaves things in an inconsistent state …

Read More
jQuery checkbox checked state changed event

I want an event to fire client side when a checkbox is checked / unchecked: $('.checkbox').click(function() { if ($(this).is(':checked')) { // Do stuff } }); Basically I want it to happen for every checkbox on the page. Is this method …

Read More
event.preventDefault() vs. return false

When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well: 1. event.preventDefault() $('a').click(…

Read More