Disable text selection and right click using JavaScript Code

on 01 January 2011

You created a nice website or a blog by working on it for hours, but did you thought that what if somebody copies your content? At least I thought about it when I created this blog. I don't want someone else to eat the fruits of the tree which I planted & nourished. The only possible way to stop plagiarism was to disable text selection and right click on my website.

I searched for this on Google and found JavaScript code to do this. But after lot of thinking, I decided not to do that as this blog has a category of programming which includes lot of coding & if the text selection and right click was disabled no one would type all that code themselves and as a result they might stop visiting this blog! Anyways if you want to disable right click and text selection, u can follow the follow the following instructions.

I also found that sometimes disabling text selection and/or right click can do more harm than good. So Before doing any changes check out Disadvantages of disabling text selection and right click

I found many scripts to do this but most of them were cross browser incompatible. Disabling the right click works on all browsers, but the text selection blocking javascript code in mozilla prevents click on the textboxes. Means if you have blocked the text selection using the javascript you, will not be able to click on the search box, contact form textbox etc.

When I faced this issue, I removed some events from javascript and used css to make it working. Setting the -moz-user-select property to none, disables the text selection in Mozilla Firefox.

1) Copy the code given below and paste it below the head tag of html page on which you want to disable right click and text selection.

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

2) Add the below code into your CSS :

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

Note: This code works with html, asp.net, php and all other languages as it's using just javascript and css. Code is tested and working in below browsers:

  1. Internet explorer (all versions)
  2. Mozilla
  3. Chrome
  4. Safari
  5. Epic

If you are using Blogger platform like me then it would be really easy to perform this task as you just need to edit the template once and the changes will be reflected in all the pages.

7 comments:

Anonymous said...

Thanks a lot!

Anonymous said...

And how all this can be done to work and in Opera???

Computer Maniac said...

This works in opera with no problems...
Check it and if it is not working please mention the version of opera browser and the problem you are facing...

Anonymous said...

It works with Internet Explorer and Chrome but not with Mozilla.

In order to work on Mozilla as well, do I have
I have to add the following ?

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


If so, where I have to add it? I have a Yolasite and cannot see CSS

Akash said...

You can add the CSS anywhere between the head tags.

Anonymous said...

its not working in opera, in opera we can press ctrl+A to select all and copy text so its not useful in opera, is anybody has solution for that?

Unknown said...

Its Not working in Mozilla after adding this code.

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

Do you have any other suggesion

Post a Comment