Detect Copy, Paste and Cut operations on a TextBox using jQuery

To detect Copy, Paste and Cut operations two years ago, I remember using the addEventListener and capturing the keyDown event. Then capture the KeyCode and ctrlKey to detect a copy or paste in JavaScript. Cumbersome!

Here’s how detecting copy, paste and cut operations is a cakewalk in jQuery

Detect Copy, Paste and Cut Operation in a HTML TextBox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Copying and Pasting in a TextBox</title>

<
script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<
script type="text/javascript">
$(document).ready(function() {
$("#Text1").bind('copy', function(e) {
alert('copying text!');
});
$("#Text1").bind('paste', function(e) {
alert('pasting text!');
});
$("#Text1").bind('cut', function(e) {
alert('cut text!');
});
});
</script>

</
head>
<
body>
<
input id="Text1" type="text" value="Copy Me" />
</
body>
</
html>


Update: Karl Swedberg suggested a simpler way of doing the above.

$("#Text1").bind('cut copy paste', function(e) {
alert(e.type + ' text!');
});

Detect Copy, Paste and Cut Operation in an ASP.NET TextBox

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="jQuery2.aspx.cs" Inherits="jQuery2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title>Handling Copy and Paste functions in TextBox</title>

<
script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<
script type="text/javascript">
$(document).ready(function() {
$("#TextBox1").bind('copy', function(e) {
alert('copying text!');
});
$("#TextBox1").bind('paste', function(e) {
alert('pasting text!');
});
$("#TextBox1").bind('cut', function(e) {
alert('cut text!');
});
});
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<
asp:TextBox ID="TextBox1" runat="server">Copy Me</asp:TextBox>
</
div>
</
form>

</
body>
</
html>


Cool..ain’t it! Just a few lines of code and you can now capture the copy, paste and cut actions on a TextBox, TextArea or any other controls that can respond to these events.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

15 comments:

Anonymous said...

I can't find the source to that functions in the jQuery code. Did you forget to include a jQuery plugin in the HTML listing?

Anonymous said...

Works fine for me with just vanilla JQuery.

Anonymous said...

Doesn't work in Firefox <= 2, nor Opera 9.

Suprotim Agarwal said...

The only jQuery needed is the version 1.3.2..there is no other plugin required for this example to run.

I haven't tested it on FireFox <=2. It works well in Firefox >3, IE 7, Chrome. What's the error you get?

bartaz said...

Copy, paste and cut events it's not something special in jQuery.
Some browsers do implement these events and jQuery makes it just trivial to bind them to elements.

More details about those events and browsers supporting them can be found here:
http://www.quirksmode.org/dom/events/cutcopypaste.html

Karl Swedberg said...

Nice tip on cut/copy/paste events!

You can make the code a little DRYer by combining event types in a single bind:

$("#TextBox1").bind('cut copy paste', function(e) {
alert(e.type + ' text!');
});

Suprotim Agarwal said...

Brilliant Karl. Less is more!

I enjoy reading every tip in your book Learning jQuery 1.3!. One of the best investments I made was getting that book and it's in one of my 15 books recommendations for web developers :)

15 Books You Must Have If You Are Doing ASP.NET Web Development

Dorian said...

Can you put a disclaimer that bans people from using this code to detect copy/paste on email and repeat email fields on signup forms?

I've not seen anyone do that for a long time but it drives me mad :)

Suprotim Agarwal said...

Dorian: If i have understood your comment correctly, you can use the same code to detect email copy paste and prevent it.

So let us assume your Email TextBox id is 'EmailRepeat', use this code:

$("#EmailRepeat").bind('paste', function(e) {
alert('paste not allowed');
return false;
});

You can also use unbind() to remove paste event from Email TextBox.

If you have multiple textboxes and need to exempt only the EmailTextBox, use 'class' instead of id.

Paul Carey said...

Very cool, I had no idea this was possible.

Much nicer than dealing with the omni-shambles that is cross browser / OS key detection.

Doug Boelter said...

Does anyone know what event(s) to bind when a user selects delete, or undo, after a right mouse click?

Anonymous said...

hello guys

it does not work for me for mouse-cut and mouse-paste, but works fine for ctrl+x and ctrl+v (test browser: ie8, ff3.6 and chrome)

is there any solution? thanks

a green spot said...

it seems that the event gets called before the the text is actually copied to the textarea, how do i get the content of the text in the action?

Suprotim Agarwal said...

Try the Blur event

Mark said...

I think it is better to use live event, instead of bind event for attaching events.
http://jquerybyexample.blogspot.com/2010/12/disable-cut-copy-and-paste-function-for.html

Read more about how bind and live are different. A very well written article.
http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html