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. Disable select and hide the highlighting of text.

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

 

 

TABLE OF CONTENTS

 

DISABLE TEXT COPY

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

 

DEMO – DISABLE COPY TEXT

YOU SHALL NOT COPY!

 

 

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 a “touch screen” these days. So contextmenu is more accurate.

 

 

2) DISABLE THE 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 & 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 ancient browsers, so please 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").

 

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

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

 

EXTRA 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

 

TUTORIAL VIDEO

 

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. Required fields are marked *