There’s no doubt that since the inception of the internet, the fight against content theft has always been on the increase as content thieves are always on the rise.
In this short tutorial, I’ll be guiding you through a set of ways you can easily disable right click on your website, blog or webpage using any of the methods below.
Before we continue, one thing you should bear in mind is that disabling right click can be useful in some websites and become useless for others. For instance, disabling right click on this blog (oscarmini.com) would do more harm than good as many people won’t be able to copy various codes I’ve given out here. So use this function wisely.
Disabling Right Click Using HTML Body Tag
After you must have designed a webpage let’s say using DreamWeaver, it is very much easy to disable right click by means of adding oncontextmenu handler in body tag of webpage.
When you view the source code of your newly designed webpage, search for <body>, add the oncontextmenu handler to it as
<body oncontextmenu=”return false;” >
[pastacode lang=”markup” manual=”%20%3Cbody%20oncontextmenu%3D%22return%20false%3B%22%3E” message=”Disable Right Click In HTML” highlight=”oncontextmenu=”return false;”” provider=”manual”/]
Then Save. It works like charm, your content would be more secured as right click would be disabled.
Disabling Right Click Using CSS
As much as we know that we are not necessarily disabling right click here, we are disabling the ability to select text using the the user-select CSS property, thus on right click, you won’t see the copy option. In this method, I’m assuming that the CSS region you wish to disable right click is specified as a body in your CSS (body). You can as well add the below CSS properties to any class name you wish. When this method is combined with any other methods, users won’t be able to either select text or right click. It’s up to you to choose if you’d combine or use this alone. Below is the CSS snippet to add to your CSS code to disable right click.
[pastacode lang=”css” manual=”body%20%7B%0A-webkit-user-select%3A%20none%3B%C2%A0%20%2F*%20Chrome%20all%20%2F%20Safari%20all%20*%2F%0A-moz-user-select%3A%20none%3B%C2%A0%C2%A0%C2%A0%C2%A0%20%2F*%20Firefox%20all%20*%2F%0A-ms-user-select%3A%20none%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%2F*%20IE%2010%2B%20*%2F%0A-o-user-select%3A%20none%3B%0Auser-select%3A%20none%3B%0A%7D” message=”Disable Select Using CSS” highlight=”” provider=”manual”/]
Add it to your site’s CSS file and save. You won’t be able to see copy whenever you right click.
Simply add the below code to the head section of your HTML code.
I hope you find this guide useful. Feel free to let us know any problems you encountered using the comment box below.