[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More


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

Published on
19,834 Points
2 Endorsements
Last Modified:
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:

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.


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)
		// the above line creates issues in mozilla so keep it commented.
	function clickIE()
		if (document.all)
			return false;
        // disable right click
	document.oncontextmenu=new Function("return false")

Add the below code into your CSS :

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

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:


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

Expert Comment

To show the problems of protecting page content.
LVL 56

Expert Comment

by:Mark Wills

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 :)

LVL 29

Expert Comment


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,

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


Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month