How To Disable Right Click On Website Pages Without Plugin (Using CSS, Javascript Or HTML)

It is clear that since the internet started existing, the battle against content theft has always been on the rise as content thieves keep increasing in numbers. However, disabling right-click is a good solution, even if it comes with its benefits and disadvantages. For example, deactivating right-click on techvaz.com will surely protect content stealers, but it’ll also prevent readers from copying the several codes in this tutorial. If you don’t mind all of that and you still want to proceed, see How To Disable Right Click On Website Pages Without Plugin (Using CSS, Javascript, Or HTML):

Disable Right Click Website Pages
Photo credit- vinaora.com

You Might Also Want To Read: Disable “Read Only” to Windows 10 folders

How To Disable Right Click On Website Pages Without Plugin (Using CSS, Javascript, Or HTML)?

Disable Right Click Using Javascript

Using Javascript to disable right-click is a popular method across the web. Even if it is least preferable because content thieves can easily find their way around it, it works sometimes. Just add the code below to the head section of your HTML code:


document.addEventListener('contextmenu', event => event.preventDefault());

Disable Right Click Using HTML Body Tag

After designing a webpage, for instance, using DreamWeaver, you can easily disable right-click by means of adding the “oncontextmenu” handler to the body tag of the webpage. When you see the source code of your newly designed webpage, search for body, add the oncontextmenu handler to it as

body oncontextmenu=”return false;.”

After that, save. It works superbly, and your content would immediately be secured as right-click would be deactivated.

Disable Right Click Using CSS

This is another very simple way to disable right-click. The fact that people don’t really know that CSS can disable text selection means that they’ll find it hard to outsmart it.

However, be aware that we aren’t necessarily disabling right-click here. We are simply deactivating the ability to select text using the user-select CSS property, therefore on right-click, no “copy” option would be visible henceforth.

For this method, I assume that the CSS region you want to deactivate right-click for is specified as a body in your CSS (body). You can add the below CSS properties to any class name you want. Combining this method with other methods means users will not be able to select text or right-click. It is left for you to decide if you’d combine or use it alone. See the snippet to add to your CSS code to disable right-click below:

body {
-webkit-user-select- none; /* Chrome all / Safari all */
-moz-user-select- none; /* Firefox all */
-ms-user-select- none; /* IE 10+ */
-o-user-select- none;
user-select- none;
}

Add it to your website’s CSS file and save it. “Copy” will no longer be visible anytime you right-click.

Disable Right Click Website Pages
Photo credit- techsna.com

You Might Also Want To Read: How to Enable or Disable Low Data Mode on iPhone.

There you go. If you ever need to deactivate right-click on website pages without using a plugin, you already know what to do and how to go about it.

author image

About Author

Samuel Afolabi is a lazy tech-savvy that loves writing almost all tech-related kinds of stuff. He is the Editor-in-Chief of TechVaz. You can connect with him socially :)

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.