If you want to prevent others from stealing content off your website, you can do so to an extent with the help of CSS, JavaScript, and jQuery. In this article, you'll learn how to disable text selection, cut, copy, paste, and right-click on a web page.
Disable Text Selection Using CSS or JavaScript
You can disable the text selection of a complete web page or a part of the page using CSS, JavaScript, or jQuery.
How to Disable Text Selection of the Complete Web Page Using JavaScript
Use onmousedown and onselectstart event attributes with the body tag to disable the text selection of a complete web page. These events override the default behavior of the browsers.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>
How to Disable Text Selection of a Part of the Web Page Using JavaScript
Use onmousedown and onselectstart event attributes with the HTML tag on those you want to disable text selection on. In the below example, text selection is disabled for the 2nd div tag.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div onmousedown="return false" onselectstart="return false">
Text selection is disabled for this text.
</div>
</body>
</html>
How to Disable Text Selection of the Complete Web Page Using CSS
Use the user-select CSS property with the body tag to disable text selection of a complete web page. For some browsers, you need to add an extension before user-select. Here's the complete list of properties for all the browsers:
- Chrome, Opera: user-select
- Safari: -webkit-user-select
- Mozilla: -moz-user-select
- IE 10+: -ms-user-select
You need to set all these properties to none to disable text selection.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>
How to Disable Text Selection of a Part of the Web Page Using CSS
Use user-select CSS property with the HTML tag on those you want to disable the text selection of. You can target those HTML elements using a class or ID. In the below example, text selection is disabled for the 2nd div tag. Here, class is used to target the 2nd div.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
.disable-text-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div class="disable-text-selection">
Text selection is disabled for this text.
</div>
</body>
</html>
How to Disable Cut, Copy, and Paste Using JavaScript
You can disable cut, copy, and paste using the oncut, oncopy, and onpaste event attributes with the target HTML elements. If you want to disable cut, copy, and paste for the complete web page, you need to use these event attributes with the body tag. You can also disable drag and drop using ondrag and ondrop event attributes. In the below example, cut, copy, paste, drag, and drop are disabled for the input tag.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the below input element.
</div>
<input
type="text"
onselectstart="return false"
oncut="return false"
oncopy="return false"
onpaste="return false"
ondrag="return false"
ondrop="return false"
/>
</body>
</html>
How to Disable Cut, Copy, and Paste Using jQuery
You can disable cut, copy, and paste on a web page using the jQuery bind() function. In the bind() function, you have to specify the cut, copy, and paste events that are fired when a user tries to cut, copy, or paste anything on the web page. Make sure to embed the script tag in the head section to load jQuery before using it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the complete web page.
</div>
<input type="text" />
<script type="text/javascript">
$(document).ready(function() {
$('body').bind('cut copy paste', function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>
How to Disable Right Click on a Web Page Using JavaScript
You can disable right-click on your web page by using an oncontextmenu event and including "return false" in the event handler.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
document.oncontextmenu = new Function("return false");
</script>
</body>
</html>
How to Disable Right Click on a Web Page Using jQuery
You can disable right-click on your web page using the contextmenu event.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
$(document).bind("contextmenu",function(e){
return false;
});
</script>
</body>
</html>
Protect Your Website From Cybercriminals
Cybercriminals use every possible tool at their disposal to steal data, spam websites, or hack sensitive information from protected pages. Including a security layer to your website to prevent these is imperative. Spamming website forms is one of the most common attacks these days. Try adding CAPTCHA validation to your website's forms to avoid these spam attacks.