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.

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. — Michael Gundlach
– Michael Gundlach, Commented Oct 26, 2008 at 1:51
So jQuery doesn't document partial support then, I mean for events such as paste and copy. — ars265
– ars265, Commented Oct 5, 2012 at 19:22

Már Örlygsson · Accepted Answer · 2013-12-10 13:38:51Z

93

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

edited Dec 10, 2013 at 13:38

answered Oct 27, 2008 at 0:11

Már Örlygsson

14.7k3 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Jarvis Over a year ago

Broken links: off and jquery.event.wheel.js.

Már Örlygsson Over a year ago

.off link is OK, and the jquery.event.wheel.js is marked <del>eted but left in for historical reasons.

dansays · Accepted Answer · 2008-10-26 01:06:52Z

14

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.

answered Oct 26, 2008 at 1:06

dansays

2,8094 gold badges23 silver badges20 bronze badges

Comments

Josh Bush · Accepted Answer · 2008-10-27 19:37:49Z

9

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

answered Oct 27, 2008 at 19:37

Josh Bush

2,7284 gold badges24 silver badges25 bronze badges

3 Comments

Daniel 'Dang' Griffith Over a year ago

Thanks, Josh. This seems to work in FF and IE. $('#myinput').bind('input', function() { my_immediate_response_function();});

mr-euro Over a year ago

Seems to work fine in FF, IE, Chrome and Safari! Super, thanks.

Daniel Earwicker Over a year ago

In IE 9, the input event doesn't fire if you delete text (either with keyboard or right-click | Cut). In Chrome and FF it does. Good work, Microsoft!

Yan Pak · Accepted Answer · 2015-09-02 16:07:19Z

1

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:

answered Sep 2, 2015 at 16:07

Yan Pak

1,8772 gold badges22 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related