How to Create Anti Copy Text Using Javascript and CSS

Welcome to tutorial How to Create Anti Copy Text Using Javascript and CSS. Are you having problems with content thieves? Was your article copied and pasted elsewhere without your permission? Then it's time to put some protection in place for your content.

To disable text copying in css and javascript, there are 3 things we need to do:

1. Disables right click (contextmenu) to prevent copy and paste.
2. Change the copy results in the clipboard.
3. CSS disables select and hide text highlighting.

But how do we implement this Anti Copy Text code? Read on to find out how!

Demo Anti Copy Text

This text cannot be copied!

Well, let's move on to the "Anti Copy Text" methods that we can implement to prevent copying.

Disables right click (contextmenu)

// (A) Prevent right click from opening
document.addEventListener("contextmenu", (evt) => {
  evt.preventDefault();
}, false);

First, let's start with one of the most common mechanisms to prevent copying – Disabling right click, copy.

All we have to do is add addEventListener("contextmenu"), and prevent it from opening with evt.preventDefault(). Yes, we're not actually targeting mouse right clicks here. Because there are other ways to open menus, with something called "touch screen" these days. So contextmenu is more accurate.

Change the copy results in the clipboard

// (B) Change the copy on the clipboard
document.addEventListener("copy", (evt) => {
  // (B1) Replace the resulting copy if you want
  evt.clipboardData.setData("text/plain", "You are prohibited from copying any text from this web.");
  // (B2) Prevents the default copy action
  evt.preventDefault();
}, false);

Next, this is the one that I think makes the most sense – Even after disabling contextmenu, people can still copy using shortcut keys, or from the browser menu item itself. The best way to prevent this is to target the copy event itself. So, if the text is successfully copied then what appears on the clipboard is the text we created above. This section should be self-explanatory.

We will Listen the copy event. If you want, you can change the resulting text copied in the clipboard You are prohibited from copying any text from this web. with your own texts. Finally, as usual, we prevent the default copy action – evt.preventDefault().

CSS disables text select and highlight

/* (C) Disable select + text highlight */
* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }

Lastly, this is a copy disabling mechanism that is only done with strict CSS. user-select: none which is fine, but we added *::selection { background: none } to remove the background color of the selected text – Makes it harder to know which block of text has been selected, or no text has been selected at all. That's definitely a good way to prevent copying.

P.S. user-select: none will not work in older browsers, so please be careful.

Disables only certain sections

<script>
window.addEventListener("load", () => {
  // (A) Target just this section
  var target = document.getElementById("no-copy");
 
  // (B) Prevents the right-click menu from opening
  target.addEventListener("contextmenu", (evt) => {
    evt.preventDefault();
  }, false);
 
  // (C) Changes the copy on the clipboard
  target.addEventListener("copy", (evt) => {
    // (C1) Change the text of the copy if you want
    evt.clipboardData.setData("text/plain", "You are prohibited from copying any text from this web.");
 
    // (C2) Prevents default copy action
    evt.preventDefault();
  }, false);
});
</script>
 
<style>
/* (D) Disable select + text highlight */
#no-copy { user-select: none; }
#no-copy::selection { background: none; }
#no-copy::-moz-selection { background: none; }
</style>
 
<p>You can copy and paste this text.</p>
<p id="no-copy">You cannot copy this section.</p>

It's not that difficult, right, if you only want to protect a certain part, then just target it specifically var target = document.getElementById("no-copy").

Congratulations, you have now installed some locks, but please note that this will not stop the over-intentioned "plagiarists". They can disable Javascript and CSS, and all this "protection" will be for nothing.

Yes. But having some kind of protection is still better than none at all. At least that will deter a lot of "not-so-bright" plagiarists.

That's all for tutorial How to Create Anti Copy Text Using Javascript and CSS, and here is a small section on some additions and links that you might find useful.

Legal protection & others

If the above is not enough to silence the plagiarists, then it is time to seek legal protection.

• First you need to set a trap. Add a faint Watermark to your image, set a hidden message "this article belongs to mydomain.com" somewhere for example.
• Let the plagiarists take the bait.
• Then, use Whois to find out which company is hosting the plagiarism – Information may be hidden and you may need to contact several parties regarding content theft.
• Once you have the information, contact the hosting company, showing proof that your content has been stolen. Most hosting companies will comply, help, and shut down plagiarists once and for all.
• Alternatively, you can register your content copyright with DMCA, pay a small fee, and ask them to help you shut down plagiarists.

Personally, I register my website to Google Search Console and Bing Webmaster Tools. When I publish an article, I manually request a crawl and register – plagiarizers will have no chance of winning search rankings. In fact, they only harm themselves by copying more.

Thank you for reading, and we have come to the end of this guide. I hope this helps you in creating your project, and if you have anything to share with this guide, feel free to comment below. Good luck and happy coding!

Infographic Cheat Sheet