HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / jQuery / jQuery – Detect Cut, Copy or Paste Events

jQuery – Detect Cut, Copy or Paste Events

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

<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 !!

Share this:

  • Twitter
  • Facebook
  • LinkedIn
  • Reddit

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Feedback, Discussion and Comments

  1. sri

    May 9, 2014

    Hi Guptha,

      I created  two tabs. 
         1) customer Tab
          2) User Tab
    

    These two tabs having the common buttons that button names are “save” and “cancel”.My Question is these two buttons are not needed in the second tab (UserTab).So i want hide those buttons in the second tab.But when i try to hide those buttons in the second tab it is not showing in the first tab.So could you please tell me how to hide those buttons in jquery ?

    • Lokesh Gupta

      May 9, 2014

      Always use unique ids for all elements in HTML page. Give the ids to button as tab_1_save, tab_1_cancel, tab_2_save and tab_2_cancel. Now hive whatever you want to hide. Nothing will effect accidentally.

      $(“#tab_1_save”).hide();

  2. SK

    December 30, 2013

    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

    • lokesh

      January 3, 2014

      Really can’t help with this limited information.

  3. chokhadavikas

    December 29, 2013

    please share a post to restrict copy paste using javascript

    • Lokesh Gupta

      December 29, 2013

      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;
      }
      }

      • vivek

        December 29, 2013

        Please tell ,what will happen if user disables javascript is disabled by user.
        Thank you.

        • Lokesh Gupta

          December 31, 2013

          Then you can’t do anything.

      • vikas

        December 29, 2013

        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.

        • vikas

          December 29, 2013

          Its not working in IE 9

          • Lokesh Gupta

            December 31, 2013

            I confirm. I works.

Comments are closed on this article!

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Array filter()
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Java 15 New Features
  • Sealed Classes and Interfaces
  • EdDSA (Ed25519 / Ed448)