4 Ways To Disable Text Copy In HTML CSS JS

Once upon a time, someone copied content from a student’s “members only” portal. She then decided it’s better to put some form of protection to prevent people from copying her “good stuff”. Let Master Coffee walk you through some possible means, and why it’s not the best idea – Let’s go!

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

METHOD 1) CSS NO SELECT

disable-copy.html
<!-- (PART A) CSS NO SELECT -->
<style>
.noselect { user-select: none; }
.noselect::selection { background: none; }
</style>

<div class="noselect">
  This section cannot be selected.
</div>
This section cannot be selected.

This is one of the easiest ways to implement “no text select”.

  • Just set user-select: none in the CSS. This will prevent users from selecting the text, and thus stopping them from copying.
  • It is optional to hide the text selection with ::selection { background: none; }, this is just to confuse the users even more.

P.S. To apply “no select” to the entire page, use * { user-select: none; } instead. But take note, this will probably cause more problems when users cannot highlight form elements.

 

 

METHOD 2) DISABLE CONTEXT MENU

disable-copy.html
<!-- (PART B) DISABLE CONTEXT MENU -->
<div class="noright">
  Context menu is disabled.
</div>

<script>
document.querySelector(".noright")
.addEventListener("contextmenu", e => e.preventDefault());
</script>
Context menu is disabled.

Normally, users can “select text, right click to open the context menu, and select copy”. This nasty little snippet will prevent users from opening that context menu.

P.S. To apply to the whole page, just change the Javascript to document.addEventListener("contextmenu", e => e.preventDefault()).

 

METHOD 3) DISABLE CLIPBOARD COPY

disable-copy.html
<!-- (PART C) DISABLE CLIPBOARD COPY -->
<div class="nocopy">
  Copying is disabled.
</div>

<script>
document.querySelector(".nocopy")
.addEventListener("copy", e => {
  e.clipboardData.setData("text/plain", "No Copying!");
  e.preventDefault();
});
</script>
Copying is disabled.

Using the modern clipboard API, we can disable copying, and even change the copied text.

  • Use ELEMENT.addEventListener("copy", ...) to listen to clipboard copy.
  • e.preventDefault() will prevent the default copy.
  • Use e.clipboardData.setData() to change the copied text.

P.S. Same as above, change to document.addEventListener("copy", ...) to apply this to the entire page.

 

 

METHOD 4) CANCEL SELECTION

disable-copy.html
<script>
document.addEventListener("selectionchange", e => window.getSelection().empty());
</script>

Finally, this is the “Javascript alternative” of the CSS no select. When the user highlights anything, cancel it in Javascript.

 

THE END – “DISABLE COPYING” IS NOT FOOLPROOF

That’s all for this short tutorial and sharing. The above methods work, but take note that they are not foolproof. There are many other ways to copy that cannot be stopped:

  • Print the page as a PDF file, copy the text from the PDF file.
  • Open the developer’s console, copy the text from there.
  • Scan the page using an image to text app… Or just take a photo of it.
  • Write a script to scrape the page and copy all the content.
  • Lastly, anyone can still “brute force copy” by typing out each and every word.

So yep, having a lock is better than none. But manage your expectations, there’s no way to stop everyone and everything.

 

 

CHEAT SHEET

Disable Text Copy in HTML CSS JS (click to enlarge)