Disable text selection and right click in html / asp.net pages: JavaScript, CSS, HTML, ASP.Net

This article explains how to make it harder to copy a html page's content (text/images). It is almost impossible to totally prevent displayed content from being copied, after all, someone can simply start typing if they are really determined. But we can make it more difficult by disabling the more obvious methods.

To accomplish this functionality you need to:
1) Disable the right clicks, so that users can't use the right click to save the images.
2) Disable the text selection.
3) Disable Drag and drop of images

All of the above mentioned conditions relates with the mouse events, so we will manipulate the mouse events using the JavaScript (which is the default client-side script supported by browsers).

Most of the scripts available on internet can do this but these are not cross browser compatible.
The JavaScript code I am using in this article is also drawn from various URL's searched by googling.
(Check the code file attached old javascript.txt)

When I applied the code (old javascript.txt) it was able to:
1) disable the right click works on all browsers
2) disable the text selection

But the main drawback of the code was that the text selection blocking JavaScript code, in Mozilla Firefox prevents click on the text boxes, as a result you can't type into the input boxes.
The below line of code is creating the problem:
document.onmousedown=disableselect

After googling and some r&d I somehow managed to get this working, what I did was
a) removed document.onmousedown=disableselect from JavaScript code
b) Used Cascading Style Sheets (CSS) for body text. Setting the -moz-user-select property to none , disables the text selection in Mozilla Firefox.

Code:

Place the below code in the head tag of html page:

<script language="JavaScript1.2" type="text/javascript">

        //The functions disableselect() and reEnable() are used to return the status of events.

	function disableselect(e)
	{
		return false 
	}
	
	function reEnable()
	{
		return true
	}
	
	//if IE4+
        // disable text selection
	document.onselectstart=new Function ("return false")
	
	//if NS6
	if (window.sidebar)
	{
		//document.onmousedown=disableselect
		// the above line creates issues in mozilla so keep it commented.
	
		document.onclick=reEnable
	}
	
	function clickIE()
	{
		if (document.all)
		{
			(message);
			return false;
		}
	}
	
        // disable right click
	document.oncontextmenu=new Function("return false")
	
</script>

Add the below code into your CSS :

body
{
-moz-user-select: none;
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:

Select all Open in new window

Disable the drag and drop of images follow the below steps:
1) In the html page body add a ondragstart method, as the name suggests it will do nothing if any drag event is performed e.g.
<body ondragstart="return false">
2) The above Javascript code doesn't works in Firefox so you need to manually add a preventDefault attribute on each image tag.
<img alt="Banner Image" src="http://someurl/abc.gif" onmousedown="if (event.preventDefault) event.preventDefault()" />

Note:
1) This code doesn't block clicks on html links, input boxes, selection box etc.
2) It code works with asp.net, php and all other web based languages as it's using pure javascript and css.
3) Code is test and working in below browser:
a) Internet explorer (all versions)
b) Mozilla
c) Chrome
d) Safari

Download the sample project files from here:
http://ajaysharma.in/uploads/codes/Disable-text-selection-and-right-click.zip

old-javascript.txt

888 bytes
old-javascript

old-javascript.txt

Disclaimer:

This code does not protect you in every instance. For example, "geeks" could browse cache and retrieve information if they wanted to, and there is always the classic screen print or print to PDF which can in turn be converted back to text. So, if someone really wanted to capture your information, it is difficult to prevent it absolutely without the aid of third party encryption based tools, and then, you might need to be a little concerned about page ranking.

This Article is really targeted toward deterrents or making it a more difficult for the "average" web surfer to copy. By using these types of techniques, it also helps to reinforce any other copyright notices you may have, in so much as denying the user to simply right click and copy. After all, if you do make it a little more difficult, readers might take it a lot more seriously.

To that end, there is another simple trick you can do and sometimes easier for specific segments (such as <body> in this case) : <body oncontextmenu="alert('This Site is protected by Copyright');return false;">

So, please think carefully about the level of protection you really need, and please use this code quite happily more as a deterrent rather than guaranteed protection for securing your content, or total prevention from copying.

I hope you have found this Article useful.

window.onload=function() { var imgs = document.getElementsByTagName('img'); for (var i=0, n=imgs.length;i<n;i++) { imgs[i].onmousedown=function(e) { if (e && e.preventDefault)e.preventDefault() } // or perhaps just return false; } }

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

30-day free trial. Register in 60 seconds.

Disable text selection and right click in html / asp.net pages

JavaScript

CSS

HTML

ASP.Net

Hypertext Markup Language (HTML)

About The Author

Comments

Add your Comment

Join Experts Exchange Today