Disabling Copy, Cut, Paste, and Context Menu using jQuery Tutorial

In this tutorial, you will learn how to disable the Copy, Cut, Paste, and ContextMenu functionality of a web application using jQuery Library. The main purpose of this tutorial is to provide the IT/CS students and new programmers with a reference to learn about using some built-in event listeners of a document using jQuery (JS Library). Here, snippets of how to disable the said events are provided and a simple working application source code that demonstrates the objective of this tutorial is provided and is free to download.

Why do we need to disable copy, cut, copy, and contextmenu?

Disabling Copy, Cut, Paste, and ContextMenu functionality in a web application is not really a requirement in implementing a website. Developers' or site owners' main reasons for implementing this is to prevent their visitors to copy their content and republish it to the other site to draw some site traffic to them or prevent them to manipulate the page contents. Disabling the said events prevents the following:

  1. Copy and Pasting Copyrighted articles or page content.
  2. Saving Images shown on the Page
  3. Saving assets/media files such as embedded content.

The list above is only some of the many reasons why developers or site owners are disabling the copy, cut, paste, and contextmenu functionalities on their sites.

How to disable copy, cut, copy, and contextmenu using jQuery?

Using jQuery Library, we can easily disable the copy, cut, paste, and contextmenu functionalities of the site in just a short line of code. We can achieve it by using the event listeners of each functionality. See the snippet below to have a better understanding.

Disabling the Copy Function of the Site

jQuery comes with a .on("copy") event listener. Using this, we can cancel the copy function on the whole page or only in a specific element.

  1. //Disabling Copy Function to the Whole document
  2. $(document).on('copy', function(e){ e.preventDefault; })
  3. // or
  4. $(window).on('copy', function(e){ e.preventDefault; })
  5.  
  6. //Disabling Copy Function to a specific element only
  7. $('article#sampleArticle').on('copy', function(e) { e.preventDefault(); })

Disabling the Cut Function of the Site

jQuery also comes with a .on("cut") event listener. Using this, we can cancel the cut functionality to all text fields on the document at once or only to a specific element.

  1. //Disabling Cut Function to all textfields
  2. $(document).on('cut', function(e){ e.preventDefault; })
  3. // or
  4. $(window).on('cut', function(e){ e.preventDefault; })
  5.  
  6. //Disabling Cut Function to a specific element only
  7. $('textarea#content').on('cut', function(e) { e.preventDefault(); })

Disabling the Paste Function of the Site

jQuery also comes with a .on("paste") event listener. Using this, we can cancel the paste functionality to all text fields on the document at once or only to a specific element.

  1. //Disabling Paste Function to all textfields
  2. $(document).on('paste', function(e){ e.preventDefault; })
  3. // or
  4. $(window).on('paste', function(e){ e.preventDefault; })
  5.  
  6. //Disabling Paste Function to a specific element only
  7. $('textarea#content').on('paste', function(e) { e.preventDefault(); })

Disabling the ContextMenu Function of the Site

ContextMenu is a list of options for a page or of an element that are only shown using the mouse right-click or pressing the context menu key on the keyboard. jQuery also comes with a .on("contextmenu") event listener. Using this, we can cancel the context menu functionality to all elements on the document at once or only to a specific element.

  1. //Disabling ContextMenu Function to all textfields
  2. $(document).on('contextmenu', function(e){ e.preventDefault; })
  3. // or
  4. $(window).on('contextmenu', function(e){ e.preventDefault; })
  5.  
  6. //Disabling ContextMenu Function to a specific element only
  7. $('textarea#content').on('contextmenu', function(e) { e.preventDefault(); })

There you go! Check out the following source code of a simple web application that demonstrates the main goal of this tutorial to have a better understanding of how to disable the copy, cut, paste, and contextmenu functionalities on an actual website.

Example

Here's the script of a sample application page with disabled copy, cut, paste, and contextmenu functionalities.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>jQuery - Disabling Copy, Cut, Paste, and Context Menu</title>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  9.  
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  11. <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  13.  
  14. html, body{
  15. height: 100%;
  16. width: 100%;
  17. }
  18. body{
  19. display: flex;
  20. height: 100%;
  21. width: 100%;
  22. flex-direction: column;
  23. }
  24. body>nav, body>footer{
  25. flex-shrink: 1;
  26. }
  27. body>main{
  28. flex-shrink: 1;
  29. flex-grow: 1;
  30. overflow: auto;
  31. display: flex;
  32. flex-direction: column;
  33. width: 100%;
  34. align-items: center;
  35. justify-content: center;
  36. }
  37. pre{
  38. min-height:20vh
  39. }
  40. </style>
  41. </head>
  42. <body style="background:#eff3fc">
  43. <nav class="navbar navbar-expand-lg navbar-dark" style="background:#495C83">
  44. <div class="container">
  45. <a class="navbar-brand" href="./">jQuery - Disabling Copy, Cut, Paste, and Context Menu</a>
  46. <div>
  47. <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
  48. </div>
  49. </div>
  50. </nav>
  51.  
  52. <main class="container-fluid">
  53. <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
  54. <h2 class="text-center">Disabling Copy, Cut, Paste, and ContentMenu to the Whole Page</h2>
  55. <hr>
  56.  
  57. <div class="card mt-3 rounded-0">
  58. <div class="card-body rounded-0">
  59. <div class="container-fluid">
  60. <ol>
  61. <li>Test if <b>"Copy"</b> function is disabled by highlighting any text on this page and try to copy it.</li>
  62. <li>Test if <b>"Cut"</b> function is disabled by highlighting any text on the textarea/textfield below and cut it. <br>
  63. <textarea name="" id="" rows="3" class="form-control rounded-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ut incidunt hic quaerat ex labore tempore enim eaque fugit? Necessitatibus unde nobis ut explicabo animi. Sed dolorum eius modi quos.</textarea>
  64. </li>
  65. <li>Test if <b>"Paste"</b> function is disabled by pasting any text on the textfield below.
  66. <textarea name="" id="" rows="3" class="form-control rounded-0" placeholder="Paste Something Here"></textarea>
  67. </li>
  68. <li>Test if <b>"ContextMenu"</b> is disabled by triggering your mouse <b>"right-click"</b> anywhere on the page and see if ContextMenu is not showing.</li>
  69. </ol>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </main>
  75. <footer class="container-fluid py-3" style="background:#495C83; color:#fff">
  76. <div class="container-fluid my-2">
  77. <div class="text-center">
  78. <b>jQuery - Disabling Copy, Cut, and Context Menu &copy; 2023</b>
  79. </div>
  80. </div>
  81. </body>
  82. $(function(){
  83. $(document).on('contextmenu', function(e){
  84. e.preventDefault()
  85. alert("This site is not allowing visitor to open the context menu.")
  86. })
  87.  
  88. $(document).on('copy', function(e){
  89. e.preventDefault()
  90. alert("This site is not allowing visitor to copy any text content.")
  91. })
  92.  
  93. $(document).on('cut', function(e){
  94. e.preventDefault()
  95. alert("This site is not allowing visitor to cut any text content.")
  96. })
  97.  
  98. $(document).on('paste', function(e){
  99. e.preventDefault()
  100. alert("This site is not allowing visitor to paste text to any text fields.")
  101. })
  102. })
  103. </html>

That's it! You can copy and save the example script on your end and test it on your browser to see if it works and achieve the main objectives of this tutorial. I have also provided the source code zip file of the sample application on this site. You can download it for free by clicking the download button located below this content/article.

DEMO VIDEO

That's the end of this tutorial. I hope this Disabling Copy, Cut, Paste, and ContextMenu using jQuery Tutorial helps you with what you are looking for and that you'll find this useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment