How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page
There can be some cases when preventing certain parts of your web page from being selected could be profitable.
Because disabled user-selection is very annoying, you had better not set it for your whole website. Instead, disable text selection for the parts or on the specific articles that you afraid might be stolen. Use it in situations where it will enhance the UX of your website.
No matter what is the reason for disabling user-selection on your website, if you have come to that step, this is the right place to learn how to that with CSS, Javascript and jQuery easily.
How to Disable Text Selection Highlighting with CSS
It’s not a difficult task to make a text unselectable. All you need to do is to disable the text selectivity for all the browsers that your webpage is likely to be loaded on.
Let’s see what extensions to use for different browsers to disable the selectivity of a text.
- Chrome, Opera (older versions), IOS Safari: -webkit-user-select
- Safari: -webkit-touch-callout
- Mozilla: -moz-user-select
- KHTML browsers (Konqueror): -khtml-user-select
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.unselectable {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #cc0000;
}
</style>
</head>
<body>
<p>I am a selectable text. You can select me.</p>
<div class="unselectable">I am an unselectable text. My text selection is disabled.</div>
</body>
</html>How to Disable Text Selection with JavaScript
Apply the onmousedown and onselectstart Events to the <body> or <div> tags to prevent text selection and copy/cut on your website. It override the default behavior of the browsers.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<h2>Unselectable text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>How to Disable Copy, Cut, and Paste with JavaScript/jQuery.
You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste event attributes. By adding these attributes into a textbox’s <input> tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Copy, cut and paste disabled</h2>
<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
<br>
</body>
</html>The same effect can be achieved by using the jQuery bind() function specifying cut and copy events that are fired when the user cuts or copies a text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Copy and cut disabled</h2>
<p>I am a text and you cannot copy or cut me.</p>
<script>
$(document).ready(function() {
$('body').bind('cut copy', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>How to Disable Right-click with JavaScript/jQuery
To disable right-click on you page, you need to add the oncontextmenu event and "return false" in the event handler. It will block all the access to the context menu from mouse right-click.
Use the bind() jQuery function to disable the right-click feature.This method disables the right-click (context menu) feature on a text field, and also alerts the user with a popup message.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Right-click disabled</h2>
<p>For this page the right-click is disabled.</p>
<script>
$(document).ready(function() {
$("body").on("contextmenu", function(e) {
return false;
});
});
</script>
</body>
</html>