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, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

15 Responses to "Detect Copy, Paste and Cut operations on a TextBox using jQuery"
  1. Anonymous said...
    July 8, 2009 at 8:11 AM

    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?

  2. Anonymous said...
    July 8, 2009 at 10:49 AM

    Works fine for me with just vanilla JQuery.

  3. Anonymous said...
    July 8, 2009 at 12:39 PM

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

  4. Suprotim Agarwal said...
    July 8, 2009 at 11:26 PM

    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?

  5. bartaz said...
    July 10, 2009 at 3:17 AM

    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

  6. Karl Swedberg said...
    July 11, 2009 at 8:07 AM

    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!');
    });

  7. Suprotim Agarwal said...
    July 12, 2009 at 10:39 AM

    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

  8. Dorian said...
    July 21, 2009 at 1:56 AM

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

  9. Suprotim Agarwal said...
    July 22, 2009 at 5:17 AM

    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.

  10. Paul Carey said...
    November 21, 2009 at 3:03 AM

    Very cool, I had no idea this was possible.

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

  11. Doug Boelter said...
    December 28, 2010 at 12:00 PM

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

  12. Anonymous said...
    January 19, 2011 at 5:47 PM

    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

  13. a green spot said...
    March 29, 2011 at 3:12 PM

    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?

  14. Suprotim Agarwal said...
    March 31, 2011 at 4:16 AM

    Try the Blur event

  15. Mark said...
    October 5, 2011 at 7:26 AM

    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

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions