Restrict copying content with CSS and JS

One caveat is that you can't absolutely prevent content copying. However, you can restrict these actions.

This article will show you how to use CSS & JS code to restrict copying content on the website.

Normally, in order to copy a Text or Image, users will use operations such as Select, Drag & Drop and Right Click. Now, we're going to block it.

To prevent behaviors like Drag & Drop, Select, you just need to add the following CSS code:

* {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

 

To prevent right click, add the following JS:

document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

 

Note: Older browsers may not support these features. See table below for details:

CSS: user-select

Element API: contextmenu event

 

For websites that use Joomla source code, you need to install the Custom HTML module to add them.

You can also add advanced settings like apply this restriction only to guests (Access) or to certain pages (Menu Assignment).

I hope this article will be useful to you!

You may also like

K2 to Content Migration

Restrict Username, Name field for Joomla

File Manager Extension for Joomla

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.


Powered By JLex Comment.