Easy tech stuff!

Disable right click(Context Menu) in your HTML page

Posted: March 14th, 2008 | Author: Nischal Shetty | Filed under: HTML | Tags: , , , | 8 Comments »

This is going to be a small post. There’s not much to talk about.

HTML has an event called “oncontextmenu”. This event handles the right click event.

So, if you want to disable right click for any field in your page, all you have to do is add “oncontextmenu” inside the particular tag. The example below will make things clear.

Ex. Suppose you want to prevent users from copy pasting something into one of your text boxes. Then you need to write the input tag as follows:

<input type=”text” oncontextmenu=”return false;”>

That’s it!! The context menu does not appear because we are handling the right click event by returning false.

Alternatively, you can disable right click for the whole page as follows:

Just copy paste the following code after the end of your <form> tag.

<script>

document.oncontextmenu = function(){return false}

</script>

http://www.techtamasha.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/reddit_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/furl_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/google_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.techtamasha.com/wp-content/plugins/sociofluid/images/twitter_48.png

8 Comments on “Disable right click(Context Menu) in your HTML page”

  1. 1 irish said at 10:34 am on May 30th, 2008:

    hey thanks fer sharing this..i hoe this one works..

  2. 2 irish said at 10:35 am on May 30th, 2008:

    hey i will put this page on my site so i can help my readers.. i hope you won’t mind thanks again.. its working.. now i no can view and rip my layout

  3. 3 babyl0ve.us » Blog Archive » GOODBYE braces said at 10:38 am on May 30th, 2008:

    [...] net fer some codes.. and luckily i’ve found the code to disable right click on wordpress | launch.. i am using it so guys i hope it can help … i added a new free wordpress theme.. check it [...]

  4. 4 anitha said at 1:09 pm on November 24th, 2008:

    hai,
    i want to disable right click for one image.and it has to support all browsers.plese its urgent

  5. 5 Nischal Shetty said at 2:15 pm on November 24th, 2008:

    @anitha

    for an image, the same way as mentioned above you can add the 'oncontextmenu' event.

    <img src="image-url" oncontextmenu="return false;">

    This should work in most browsers. However I cannot assure you how many browsers support this.

    If your aim is to disallow users from saving a photo then I'm afraid there's no easy way out. Even if you are able to prevent right-click on all browsers, users can save the web page and retrieve the image or key in the image url directly in the browser!

  6. 6 tyler said at 5:16 pm on June 10th, 2009:

    Set the image as a background to a div, makes it very hard to copy it.

  7. 7 Nischal Shetty said at 5:34 pm on June 10th, 2009:

    @tyler

    That seems like a nice trick :)

  8. 8 MGyuri said at 3:49 pm on June 12th, 2009:

    hello.
    Where paste the code? (in wordpress)

Leave a Reply