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.
Tweet
About The Author
15 comments:
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?
Works fine for me with just vanilla JQuery.
Doesn't work in Firefox <= 2, nor Opera 9.
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?
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
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!');
});
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
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 :)
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.
Very cool, I had no idea this was possible.
Much nicer than dealing with the omni-shambles that is cross browser / OS key detection.
Does anyone know what event(s) to bind when a user selects delete, or undo, after a right mouse click?
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
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?
Try the Blur event
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
Post a Comment