Disable right click(Context Menu) in your HTML page

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>

Tags: , , ,

8 comments

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

  2. 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. hai,
    i want to disable right click for one image.and it has to support all browsers.plese its urgent

  4. @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!

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

  6. @tyler

    That seems like a nice trick :)

  7. hello.
    Where paste the code? (in wordpress)

Leave a comment