+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Disable mouse right click, cut, copy, paste with JavaScript or jQuery (/thread-99810.html)
[Tut] Disable mouse right click, cut, copy, paste with JavaScript or jQuery - xSicKxBot - 08-16-2022
Disable mouse right click, cut, copy, paste with JavaScript or jQuery
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/08/disable-mouse-right-click-cut-copy-paste-with-javascript-or-jquery.jpg" width="550" height="281" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on August 14th, 2022.</div>
<p>Before learning how to disable the cut, copy, paste and right-click event in JavaScript we should know first Why.</p>
<p>Why we need this is, for <a href="https://phppot.com/css/how-to-make-online-photo-editing-effects-like-blur-image-sepia-vintage/">copying and manipulating content</a> displayed on the client. It lets the user struggle to do the following for example.</p>
<ol>
<li>Take the copyrighted site content by copy and paste.</li>
<li><a href="https://phppot.com/php/extract-images-from-url-in-excel-with-php-using-phpspreadsheet/">Save media files by right-clicking</a> and saving assets.</li>
</ol>
<p>We implement this disabling by using the below steps. The first two of them are mandatory and the 3rd one is optional.</p>
<ol>
<li>Listen to the event type cut, copy, paste and right-click.</li>
<li>Prevent the default behavior with the reference of the <em>event</em> object.</li>
<li>Acknowledge users by showing alert messages [optional step].</li>
</ol>
<p><a class="demo" href="https://phppot.com/demo/disable-mouse-right-click-cut-copy-paste/">View Demo</a></p>
<p><img loading="lazy" class="alignnone size-large wp-image-18941" src="https://phppot.com/wp-content/uploads/2022/08/disable-cut-copy-paste-right-click-550x281.jpg" alt="disable cut copy paste right click" width="550" height="281" srcset="https://phppot.com/wp-content/uploads/2022/08/disable-cut-copy-paste-right-click-550x281.jpg 550w, https://phppot.com/wp-content/uploads/2022/08/disable-cut-copy-paste-right-click-300x153.jpg 300w, https://phppot.com/wp-content/uploads/2022/08/disable-cut-copy-paste-right-click-768x392.jpg 768w, https://phppot.com/wp-content/uploads/2022/08/disable-cut-copy-paste-right-click.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Example 1 – Disabling cut, copy, paste and mouse right-click events</h2>
<p>This JavaScript disables the cut, copy, paste and right-click on a textarea content.</p>
<p>It defines a callback invoked on document ready event. It uses jQuery.</p>
<p>In this callback, it listens to the cut, copy, paste and the mouse right-click action requests.</p>
<p>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>
<pre class="prettyprint"><code class="language-javascript">$(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'); });
}); function alertUser(message) { $("#phppot-message").text(message + ' is disabled.'); $("#phppot-message").show();
}
</code></pre>
<h3>HTML with Textarea and alert box</h3>
<p>This HTML has the textarea. The JavaScript targets this textarea content to disable the cut, copy and more events.</p>
<p>Once disabled the default behavior, the UI should notify the user by <a href="https://phppot.com/php/add-edit-comments-using-jquery-dialogify/">displaying a message</a>.</p>
<p>So, it contains an HTML alert box to show a red ribbon with a related error message to let the user understand.</p>
<p>It includes the <a href="https://releases.jquery.com/" target="_blank" rel="noopener">jQuery library with a CDN URL</a>. Insert the above script next to the jQuery include then run the example.</p>
<p>The downloadable at the end of this article contains the complete working example.</p>
<pre class="prettyprint"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Disable mouse right click, cut, copy, paste with JavaScript or jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
<style>
#phppot-message { display: none;
}
</style>
<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>
</body>
</html>
</code></pre>
<h2>Example 2 – Thin version using jQuery</h2>
<p>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>
<p>This binds all the events to be disabled. It has a single-line code instead of creating exclusive listeners for each event.</p>
<p>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>
<p>In the first method, the <a href="https://phppot.com/jquery/jquery-show-hide/">acknowledgment message</a> is too specific. That message gives more clarity on what is triggered and what is disabled and prevented.</p>
<p>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>
<pre class="prettyprint"><code class="language-javascript">$(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(); });
});
</code></pre>
<h2>Example 3 – For JavaScript lovers</h2>
<p>Do you want a pure JavaScript solution for this example? The below script achieves this to disable cut, copy, paste and right-click.</p>
<p>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>
<p>If the application is going to have thin requirements, then no need for any framework.</p>
<h3>HTML with onCut, onCopy, onPaste and onContextMenu attributes</h3>
<p>The Textarea field in the below HTML has the following callback attributes.</p>
<ul>
<li>onCut</li>
<li>OnCopy</li>
<li>onPaste</li>
<li>onContextMenu</li>
</ul>
<p>In these event occurrences, it calls the <em>disableAction()</em>. It sends the event object and a string to specify the event occurred.</p>
<pre class="prettyprint"><code class="language-html"><textarea name="notes" class="full-width" rows="5" onCut="disableAction(event, 'Cut');" onCopy="disableAction(event, 'Copy');" onpaste="disableAction(event, 'Paste');" oncontextmenu="disableAction(event, 'Right click');"></textarea>
<div id="phppot-message" class="error"></div>
</code></pre>
<h3>JavaScript function called on cut, copy, paste and on right click</h3>
<p>In the JavaScript code, it reads the event type and disables it.</p>
<p>The event.preventDefault() is the common step in all the <a href="https://phppot.com/jquery/enable-disable-submit-button-based-on-validation/">examples to disable</a> the cut, copy, paste and right click.</p>
<pre class="prettyprint"><code class="language-javascript">function disableAction(event, action) { event.preventDefault(); document.getElementById("phppot-message").innerText = action + ' is disabled.'; document.getElementById("phppot-message").style.display = 'block';
}
</code></pre>
<h2>Disclaimer</h2>
<p>The keyboard or mouse event callbacks like <em>onMouseDown()</em> or <em>onKeyDown</em> lags in performance. Also, it has its disadvantages. Some of them are listed below.</p>
<ol>
<li>The keys can be configured and customized. So, event handling with respect to the keycode is not dependable.</li>
<li>On clicking the mouse right, it displays the menu before the <em>onMouseDown()</em> gets and checks the key code. So, disabling mouse-right-click is failed by using <em>onMouseDown()</em> callback.</li>
<li>Above all, an user can easily disable JavaScript in his browser and use the website.</li>
</ol>
<p><a class="demo" href="https://phppot.com/demo/disable-mouse-right-click-cut-copy-paste/">View Demo</a><a class="download" href="https://phppot.com/downloads/disable-mouse-right-click-cut-copy-paste.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/disable-mouse-right-click-cut-copy-paste/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/08/14/disable-mouse-right-click-cut-copy-paste-with-javascript-or-jquery/