Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
In this article, we will explored how to disable Text Selection, Copy, Cut, Paste and Right-click in JS (JavaScript) with example code and a interactive demo.
TABLE OF CONTENT:-
- Introduction
- How to Disable Text Selection with JavaScript
- How to Disable Copy, Cut, and Paste with JavaScript
- How to Disable Right-click with JavaScript
- Demo
Introduction
Before we delve into the main topic, let us understand what Javascript or as it's popularly called, JS. Javascript is a language used by web delopers and programmers alike all over the world to build effectual and interactive web contents in the form of browsers and applications. JavaScript(JS) is a sought-after programming language that its widely used all across the world. According to a recent report, 97.5% of all websites use Javascript as the client-side(Front-End)programming language. This proves that Javascript is one of the core technologies of the World Wide Web
Since most websites use different tools, images and other valube data. It is sometimes advisable to protect the website from cut, copy, paste and right using Javascript attributes. This help to offer some type of security to your website and also protect your soucre code from unauthorised use.
How to Disable Text Selection with JavaScript
To disable text selection in JS we use the onmousedown and onselectstart event attributes to html tags to shut out text selection and copy/cut on your webpage. The attributes can be added to <body>, <div> or <p> html tags. Adding the attributes to the <body> will disable the function for the whole page, while in a <div> will be limited to the tag in question, likewise
in a <p> will apply only for the paragraph.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Text Selection with JavaScript</title>
</head>
<body>
<div onmousedown="return false" onselectstart="return false">
<h2>Text Selection Disabled</h2>
<p>The text selection in this paragraph has been disabled using JS</p>
</div>
</body>
</html>
How to Disable Copy, Cut, and Paste with JavaScript
Below is JS code to disable copy and cut functions using the oncopy, oncut and onpaste event attributes. Adding these attributes into the html tags, it will disable cut, copy and paste.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Copy, Cut, and Paste with JavaScript</title>
</head>
<body type="text" onselectstart="return false"
onpaste="return false;" onCopy="return false"
onCut="return false" onDrag="return false"
onDrop="return false" autocomplete=off>
<h2>Copy, cut and paste disabled</h2>
<p>This text can not be copied, cut or pasted</p>
<br>
</body>
</html>
How to Disable Right-click with JavaScript
To disable right-click on you website , we will add the oncontextmenu event and "return false" in the event handler. Another method is to add oncontextmenu="return false to the <body, <div> or <p> tags. It will disable all attempt to obtain the tags content using mouse right-click
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>How to Disable Right-click with JavaScript</title>
</head>
<body>
<div>
<p>Right Click is disabled for the web page.</P>
</div>
<script>
document.addEventListener("contextmenu", function(event){
event.preventDefault();
alert('Right Click is Disabled');
}, false);
</script>
</body>
</html>
**In the <div tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div oncontextmenu="return false;">
<p>Right Click is disabled for the web page.</P>
</div>
</body>
</html>
An example to demonstrate all the features:
Copy, cut and paste disabled
This text can not be copied, cut or pasted
Text Selection Disabled
The text selection in this paragraph has been disabled using JS
Right Click is disabled for the web page.
 The HTML code of the above demo demonstrating disabling Text Selection, Copy, Cut, Paste and Right-click in JS is as follows:
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Copy, Cut, and Paste with JavaScript</title>
</head>
<body>
<div class = "container">
<div style="border:1px solid black; padding:10px" type="text" onselectstart="return false"
onpaste="return false;" onCopy="return false"
onCut="return false" onDrag="return false"
onDrop="return false" autocomplete=off, >
<h2>Copy, cut and paste disabled</h2>
<p>This text can not be copied, cut or pasted</p></div>
<div style="background-color: #25c5a7;" onmousedown="return false" onselectstart="return false">
<h2>Text Selection Disabled</h2>
<p>The text selection in this paragraph has been disabled using JS</p>
</div>
<div style="background-color: #33ae32;" oncontextmenu="return false;">
<p>Right Click is disabled for the web page.</P>
  </div></div></body>
</html>
With this article at OpenGenus, you must have the complete idea of how to disable Text Selection, Copy, Cut, Paste and Right-click in JS (JavaScript).
