jQuery: Detect cut copy or paste events

Spread the words...Share on Google+1Share on Facebook4Tweet about this on Twitter2Share on LinkedIn0Buffer this pageShare on StumbleUpon0Share on Reddit0

If you have worked on projects involved dynamic UI having client side input validations, then you can recall that it is very common practice among QA/testers that they try to copy lots of garbage text to create invalid scenarios and log them as a bug. I will not comment on validity of these kind of issues. Here in this post, I will give you a solution which you can use to solve this problem if it happens to you.

Please note that this will work always. No matter you generate these events with keyboard or mouse.

jquery_logo

Read More: Difference between keypress and keydown events and Detect ENTER key

Detect CUT COPY or PASTE events

To detect these events you need to bind following events in given manner for any input area.

$(document).ready(function() {
	$("#textA").bind({
		copy : function(){
		$('#message').text('copy behaviour detected!');
		},
		paste : function(){
		$('#message').text('paste behaviour detected!');
		},
		cut : function(){
		$('#message').text('cut behaviour detected!');
		}
	});
});	

Try yourself

DemoSourcecode

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<style type="text/css">
		span{
			color:green;
			font-weight:bold;
		}
		</style>
	</head>
	<body>
		<h1>Detect Cut, Copy and Paste with jQuery</h1>
		<form action="#">
			<label>Text Box : </label>
			<input id="textA" type="text" size="50" value="Copy, paste or cut any text here" />
		</form>

		<span id="message"></span>

		<script type="text/javascript">
		$(document).ready(function() {
			$("#textA").bind({
				copy : function(){
				$('#message').text('copy behaviour detected!');
				},
				paste : function(){
				$('#message').text('paste behaviour detected!');
				},
				cut : function(){
				$('#message').text('cut behaviour detected!');
				}
			});
		});	
		</script>
	</body>
</html>

Happy Learning !!

Spread the words...Share on Google+1Share on Facebook4Tweet about this on Twitter2Share on LinkedIn0Buffer this pageShare on StumbleUpon0Share on Reddit0

 

 

Give me your email address and whenever I write any tutorial or discuss any java concept, you will receive a little email in your inbox.

Join 2,871 other subscribers

9 thoughts on “jQuery: Detect cut copy or paste events”

  1. Hi Guptha,

    I created J table. Their is a toolbar options with the name of(activate,deactivate etc).My Toolbar name is “Loggedinusers”.When i click that Loggedinusers button it has been showing the popup box and it is showing the Loggedinusers list.But the issue is when i click the Loggedinusers button second time it is not showing any list.It is just showing the popup box..could you please clarify this doubt.?

    Thanks in Advance

    1. Why you would like to restrict copy + cut?? Pasting can be made mandatory in some cases where you want user to type whole input text so that he knows what he is typing. e.g. email validations.


      window.onload = function() {
      var myInput = document.getElementById('myInput');
      myInput.onpaste = function(e) {
      //Do something here
      e.preventDefault();
      //return false;
      }
      }

      1. Thanks for the reply……
        My Problem was that i do want want user to put char value in a numeric field.copy paste effecting the functionality.
        I will try this solution.

Want to ask any question? Or suggest anything?