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.

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

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-disable-copy-text-in-javascript-css/” title=”How To Disable Copy Text In Javascript CSS” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

DEMO – DISABLE COPY TEXT

 

 

1) DISABLE RIGHT-CLICK (CONTEXT MENU)

// (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

// (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

/* (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

<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").

 

 

 

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 for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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

• Context Menu Event – MDN
• Copy Event – MDN
• Clipboard – MDN
• CSS Selection – MDN
• If you want even more protection, obfuscate your scripts to make it very difficult to determine where the protection is placed.
• Example on CodePen – Disable Text Copy

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET