{"id":127283,"date":"2022-08-14T15:01:12","date_gmt":"2022-08-14T15:01:12","guid":{"rendered":"https:\/\/phppot.com\/?p=18911"},"modified":"2022-08-14T15:01:12","modified_gmt":"2022-08-14T15:01:12","slug":"disable-mouse-right-click-cut-copy-paste-with-javascript-or-jquery","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/08\/14\/disable-mouse-right-click-cut-copy-paste-with-javascript-or-jquery\/","title":{"rendered":"Disable mouse right click, cut, copy, paste with JavaScript or jQuery"},"content":{"rendered":"
by Vincy<\/a>. Last modified on August 14th, 2022.<\/div>\n

Before learning how to disable the cut, copy, paste and right-click event in JavaScript we should know first Why.<\/p>\n

Why we need this is, for copying and manipulating content<\/a> displayed on the client. It lets the user struggle to do the following for example.<\/p>\n

    \n
  1. Take the copyrighted site content by copy and paste.<\/li>\n
  2. Save media files by right-clicking<\/a> and saving assets.<\/li>\n<\/ol>\n

    We implement this disabling by using the below steps. The first two of them are mandatory and the 3rd one is optional.<\/p>\n

      \n
    1. Listen to the event type cut, copy, paste and right-click.<\/li>\n
    2. Prevent the default behavior with the reference of the event<\/em> object.<\/li>\n
    3. Acknowledge users by showing alert messages [optional step].<\/li>\n<\/ol>\n

      View Demo<\/a><\/p>\n

      \"disable<\/p>\n

      Example 1 \u2013 Disabling cut, copy, paste and mouse right-click events<\/h2>\n

      This JavaScript disables the cut, copy, paste and right-click on a textarea content.<\/p>\n

      It defines a callback invoked on document ready event. It uses jQuery.<\/p>\n

      In this callback, it listens to the cut, copy, paste and the mouse right-click action requests.<\/p>\n

      When these requests are raised this script prevents the default behavior. Hence, it stops the expected action based on the cut, copy, and other requests mentioned above.<\/p>\n

      $(document).ready(function() { $('textarea').on(\"cut\", function(e) { e.preventDefault(); alertUser('Cut'); }); $('textarea').on(\"copy\", function(e) { e.preventDefault(); alertUser('Copy'); }); $('textarea').on(\"paste\", function(e) { e.preventDefault(); alertUser('Paste'); }); $(\"textarea\").on(\"contextmenu\", function(e) { e.preventDefault(); alertUser('Mouse right click'); });\n}); function alertUser(message) { $(\"#phppot-message\").text(message + ' is disabled.'); $(\"#phppot-message\").show();\n}\n<\/code><\/pre>\n
      HTML with Textarea and alert box<\/h3>\n
      This HTML has the textarea. The JavaScript targets this textarea content to disable the cut, copy and more events.<\/p>\n
      Once disabled the default behavior, the UI should notify the user by displaying a message<\/a>.<\/p>\n
      So, it contains an HTML alert box to show a red ribbon with a related error message to let the user understand.<\/p>\n
      It includes the jQuery library with a CDN URL<\/a>. Insert the above script next to the jQuery include then run the example.<\/p>\n
      The downloadable at the end of this article contains the complete working example.<\/p>\n
      <!DOCTYPE html>\n<html>\n<head>\n<title>Disable mouse right click, cut, copy, paste with JavaScript or jQuery<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/form.css\" \/>\n<style>\n#phppot-message { display: none;\n}\n<\/style>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\" integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\" crossorigin=\"anonymous\"><\/script> <\/head> <body> <div class=\"phppot-container\"> <h2>Disable mouse right click, cut, copy, paste<\/h2> <textarea name=\"notes\" class=\"full-width\" rows=\"5\"><\/textarea> <div id=\"phppot-message\" class=\"error\"><\/div> <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
      Example 2 \u2013 Thin version using jQuery<\/h2>\n
      This example is a thin version of the above. It also uses the jQuery library to disable the cut, copy paste and right-click events.<\/p>\n
      This binds all the events to be disabled. It has a single-line code instead of creating exclusive listeners for each event.<\/p>\n
      This method has a slight disadvantage. That is, it shows a generic message while stopping any one of the cut, copy, paste and right-click events.<\/p>\n
      In the first method, the acknowledgment message<\/a> is too specific. That message gives more clarity on what is triggered and what is disabled and prevented.<\/p>\n
      But, the advantage of the below example is that it is too thin to have it as a client-side feature in our application.<\/p>\n
      $(document).ready(function() { $('textarea').bind('cut copy paste contextmenu', function(e) { e.preventDefault(); $(\"#phppot-message\").text('The Cut copy paste and the mouse right-click are disabled.'); $(\"#phppot-message\").show(); });\n});\n<\/code><\/pre>\n
      Example 3 \u2013 For JavaScript lovers<\/h2>\n
      Do you want a pure JavaScript solution for this example? The below script achieves this to disable cut, copy, paste and right-click.<\/p>\n
      It has no jQuery or any other client-side framework or libraries. I believe that the frameworks are for achieving a volume of effects, utils and more.<\/p>\n
      If the application is going to have thin requirements, then no need for any framework.<\/p>\n
      HTML with onCut, onCopy, onPaste and onContextMenu attributes<\/h3>\n
      The Textarea field in the below HTML has the following callback attributes.<\/p>\n