<

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

Published on
19,704 Points
13,504 Views
2 Endorsements
Last Modified:
Approved
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;
}

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

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.
2
Comment
Author:Ajay Sharma
  • 2
4 Comments
LVL 29

Expert Comment

by:rdivilbiss
To show the problems of protecting page content.
nocopyprotection.jpg
0
LVL 54

Expert Comment

by:Mark Wills
@rdivilbiss:

Reading the fine print (and the disclaimer), it is acting more as a deterrent more so than a method of protection.

Agree, the fact that it is visible means it can be copied, just a bit more involved for those who want to copy. No need to make it as easy as a right click...

And for a lot of "mere mortals" a deterrent maybe all that is required :)

0
LVL 29

Expert Comment

by:rdivilbiss
ajaysharmaapjs,

My apologies if any of my feedback seemed harsh. It was not my intent.

Nice job and thank you for contributing to our collection of articles.

Best regards,
Rod

0
LVL 75

Expert Comment

by:Michel Plungjan
Instead of

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

you could do
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;
  }
}

Open in new window

0

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Join & Write a Comment

In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month