Have you ever thought about disabling the copy-paste feature on your website? Yes, it might sound a little unorthodox at first, but believe me, there are situations when it becomes necessary. As a web developer myself, I’ve often come across situations where I’ve had to protect website content from the notorious “Ctrl+C, Ctrl+V” maneuver. So today, I’ve decided to share my knowledge on how to disable copy-pasting from a website using JavaScript and CSS. It’s a nifty little trick that you may find helpful.
Are people copying content from your website? Good content always gets copied, thereby causing a loss to the original creator.
Websites of competitors end up copying your content without consent. Blog content, Ecommerce product content, etc., are always in threat.
This tutorial will show you how to use Javascript and CSS to prevent people from copying text from your website.
Let’s follow simple steps which will completely prevent people from copying text from your website.
3 steps to prevent Copy Paste of Website Content using Javascript and CSS
1. Disable mouse right-click (context menu) to prevent copy paste
Right Click of mouse and copying text is the most common method that people follow. Let’s prevent this seamlessly with just a few lines of code.
At first, we have to listen to the context menu event. We can do that by adding an event listener – addEventListener("contextmenu") and prevent it from its default behaviour that is, the menu opening up by – e.preventDefault().
document.addEventListener(
"contextmenu",
(e) => {
e.preventDefault();
},
false
);If you observe, we are not just targeting the “Right Mouse Click” event alone. But, the contextmenu itself, as this will even cover the “Touch Screen” devices.
2. Disable Clipboard to prevent copy paste
We have gotten rid of the biggest problem in the first step. Now, let’s disable the keyboard shortcut that people commonly use – “CONTROL/CMD + C” and “CONTROL/CMD + V”.
Here we will listen to the browser copy event. We will prevent the default behaviour here by – e.preventDefault().
document.addEventListener(
"copy",
(e) => {
e.preventDefault();
},
false
);3. Prevent Selection and Highlight using CSS to prevent copy paste
Now that most of the work is already done using JavaScript in the above steps, but, we will take extra caution here to prevent selection and highlighting of text.
Though user-select: none should be good enough, but, we will go ahead and add *::selection { background: none } to further remove the background color of the selected text. By doing this, people won’t be able to see if the text has been selected.
* {
user-select: none;
}
*::selection {
background: none;
}
*::-moz-selection {
background: none;
}Legal notice – Is it legal to disable copy paste from website?
The above steps have made your website more secure and less prone to people copying your content.
You can still protect your content in the following ways-
- Watermarking Images and Videos – Adding watermark with opacity of 50% will be a good first solution. People who copy your images and videos, will now be attributing your content.
- Contact the owner of the website – Contact the website owner and request them to takedown the content.
- Whois and Hosting Company – Check the website’s hosting using whois and other tools online. Contact the hosting company and request them to take down the copying website with DMCA notice.
Hope you will be able to protect your content and prevent competitors from copying and pasting your website content.
We’ve been on quite an exciting journey, haven’t we? We started with the “why”, went on to explore the “how”, and finally, you now have a solid understanding of how to disable the copy-paste functionality on your website using JavaScript and CSS. Remember, as web developers, we have a responsibility to protect our content, but we should also strive to maintain a user-friendly experience. Disabling copy-pasting can be a useful tool in our kit, but it’s crucial to know when and where to use it appropriately. Until next time, happy coding!
