jQuery Capture Copy, Paste and Cut Events

Share this article

This is how you can capture if someone has copied, cut or pasted into a input text area.

Demo

Copy, cut or paste text from/to the text area below.

The Code

(function($)
{
    $(document).ready(function() {

        $("#textinput").bind({
            copy : function(){
                $('#eventresult').text('copy behaviour detected!');
            },
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            },
            cut : function(){
                $('#eventresult').text('cut behaviour detected!');
            }
        });

    });
})(jQuery);

Frequently Asked Questions about jQuery Capture, Copy, Paste, and Cut Events

How can I bind the paste event in jQuery?

Binding the paste event in jQuery is quite simple. You can use the .on() method to bind the paste event to an element. Here’s a simple example:

$("#yourElement").on('paste', function(e) {
// Your code here
});
In this code, #yourElement is the ID of the HTML element you want to bind the paste event to. The function inside the .on() method will be executed whenever a paste event occurs on that element.

How can I get the content of the paste event in jQuery?

To get the content of the paste event in jQuery, you can use the event.originalEvent.clipboardData.getData('text') method. This method returns the text that was pasted. Here’s an example:

$("#yourElement").on('paste', function(e) {
var pastedData = e.originalEvent.clipboardData.getData('text');
console.log(pastedData);
});
In this code, pastedData will contain the text that was pasted.

What is the clone() method in jQuery?

The clone() method in jQuery is used to create a copy of the selected elements, including their child nodes, text, and attributes. Here’s an example:

var clonedElement = $("#yourElement").clone();
In this code, clonedElement will be a copy of the element with the ID yourElement.

How can I capture the cut event in jQuery?

Capturing the cut event in jQuery is similar to capturing the paste event. You can use the .on() method to bind the cut event to an element. Here’s an example:

$("#yourElement").on('cut', function(e) {
// Your code here
});
In this code, the function inside the .on() method will be executed whenever a cut event occurs on that element.

How can I capture the copy event in jQuery?

To capture the copy event in jQuery, you can use the .on() method to bind the copy event to an element. Here’s an example:

$("#yourElement").on('copy', function(e) {
// Your code here
});
In this code, the function inside the .on() method will be executed whenever a copy event occurs on that element.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week