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


Answers

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.

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.




jQuery bind to Paste Event, how to get the content of the paste

There is an onpaste event that works in modern day browsers. You can access the pasted data using the getData function on the clipboardData object.

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

All modern day browsers support the Clipboard API. More info can be found at http://caniuse.com/#feat=clipboard

From In Jquery How to handle paste?




In Jquery How to handle paste?

There is an onpaste event that works in modern day browsers:

$("#textareaid").bind("paste", function(){});

Problem with the event, it tells you that it is about to happen, but it doesn't give you what the user is pasting. JavaScript has restricted acccess to the clipboard and by default it is disabled. If the access is enabled you can read the clipboard data and than manipulate it.




You'll need to use the mouseup event, instead of the keyup event. keyup is for keyboard actions. I am not sure if the page will receive a mouseup event from a context menu, though. (right-click -> "paste" makes you click a "paste" button on a non-DOM element.


Or the events Miszy suggested would be a better choice.




I recently needed to accomplish something similar to this. I used the following design to access the paste element and value. jsFiddle demo

$('body').on('paste', 'input, textarea', function (e)
{
    setTimeout(function ()
    {
        //currentTarget added in jQuery 1.3
        alert($(e.currentTarget).val());
        //do stuff
    },0);
});