3 Ways to Disable Copy Text in Javascript & CSS

Welcome to a tutorial on how to prevent text copying on a webpage using Javascript and CSS. Are you having some problems with content thieves? Are your articles getting copied and pasted somewhere else without your permission? Then it’s time to put some protection into place.

To disable text copying in CSS and Javascript, there are 3 things we need to address:

  1. Disable the right-click (context menu) to prevent copy-and-paste.
  2. Disable the clipboard copy.
  3. CSS disable select and hide the highlighting of text.

But just how do we implement all of these? Read on to find out how!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo Copy Protection Useful Bits & Links
The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

DEMO – DISABLE COPY TEXT

YOU SHALL NOT COPY!

 

 

COPY PROTECTION

All right, let us now move into all the “copy protection” we can put in place to prevent copying.

 

1) DISABLE RIGHT-CLICK (CONTEXT MENU)

1-all.html
// (A) PREVENT CONTEXT MENU FROM OPENING
document.addEventListener("contextmenu", (evt) => {
  evt.preventDefault();
}, false);

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

  • All we have to do is to listen to the context menu event addEventListener("contextmenu"), and prevent it from opening with evt.preventDefault().
  • Yes, we are not actually targeting the right-mouse clicks here. Because there are other ways to open the menu, with something called “touch screen” these days. So contextmenu is more accurate.

 

 

2) DISABLE CLIPBOARD COPY

1-all.html
// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", (evt) => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

Next, this is one that I personally think makes the most sense – Even after disabling the context menu, people can still copy using the shortcut keys, or from the browser menu items themselves. The best way to prevent that is to target the copy event itself. This section should be pretty self-explanatory.

  • We listen to the copy event.
  • If you want, you can change the copied text in the clipboard with evt.clipboardData.setData("text/plain", "MESSAGE").
  • Finally, as usual, we prevent the default copy action – evt.preventDefault().

 

3) CSS NO SELECTION AND HIGHLIGHT

1-all.html
/* (C) NO SELECT + HIGHLIGHT COLOR */
* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }

Finally, this one is a copy-disable mechanism done with strictly CSS only. user-select: none should be good enough, but we add *::selection { background: none } to further remove the background color of the selected text – Making it a lot more difficult to tell which block of text has been selected, or if any text has been selected at all. Definitely a good way to deter copying.

P.S. user-select: none will not work on the ancient browsers, so please do be careful about it.

 

 

EXTRA) DISABLE FOR A CERTAIN SECTION ONLY

2-part.html
<script>
window.addEventListener("load", () => {
  // (A) TARGET THIS SECTION ONLY
  var target = document.getElementById("no-copy");
 
  // (B) PREVENT CONTEXT MENU FROM OPENING
  target.addEventListener("contextmenu", (evt) => {
    evt.preventDefault();
  }, false);
 
  // (C) PREVENT CLIPBOARD COPYING
  target.addEventListener("copy", (evt) => {
    // (C1) CHANGE THE COPIED TEXT IF YOU WANT
    evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
    // (C2) PREVENT THE DEFAULT COPY ACTION
    evt.preventDefault();
  }, false);
});
</script>
 
<style>
/* (D) NO SELECT + HIGHLIGHT COLOR */
#no-copy { user-select: none; }
#no-copy::selection { background: none; }
#no-copy::-moz-selection { background: none; }
</style>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="no-copy">This section cannot be copied.</p>

Not that difficult as well, if you only want to protect a certain section, then just target it specifically var target = document.getElementById("no-copy").

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

NOT FOOLPROOF

Congratulations, you have now put a few locks in place, but please take note that these will not stop the “super hacker copycats” if they are determined enough. Javascript and CSS can be disabled, and all this “protection” will be for nothing. Check out my guide on my other blog: How to copy text from a right-click disabled webpage – Red Dot Geek

Yep. But having some sort of protection is still better than none. At least it will deter many of the not-so-intelligent copycats.

 

LEGAL & OTHER PROTECTION

If the above is not enough to shut down a copycat, then it’s time to seek legal protection instead.

  • First, you need to set a trap. Add a faint watermark on your images, set a hidden “this article belongs to myninjasite.com” message somewhere.
  • Let the copycat take the bait.
  • Use Whois to find out which is the copycat’s hosting company – The information may be hidden and you may need to contact several parties regarding content theft.
  • Once you have the information, contact the hosting company, show them proof that your contents are stolen. Most hosting companies will comply, help, and shut the copycat down for good.
  • Alternatively, you can sign up with DMCA, pay a small fee and get them to help you shut the copycat down.

Personally, I just register my websites with Google Search Console and Bing Webmaster Tools. The moment I publish an article, I manually request a crawl and register – Copycats will have no chance of winning the search ranking. In fact, they only hurt themselves by copying more.

 

LINKS & REFERENCES

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

How To Disable Copy Text In JS & CSS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “3 Ways to Disable Copy Text in Javascript & CSS”

  1. Roberto Locatelli

    Thank for these orientations. I’m creating a website to teach meditation, relax, etc, and I need to protect the content.
    It’s okay if some super hacker manages to steal my videos and texts, which will be purchased for about $ 3.00 a month. The problem is if all Internet users download the content.

Leave a Comment

Your email address will not be published.