Ever wondered how you could disable right click on your website with either CSS, JavaScript or HTML? Well, you are not the only one. Every one of us has had those thoughts.
There’s been an increase in content and image theft as a result of the influx of new bloggers. For that reason, many people look for ways to protect their contents.
Today, we would be looking at several ways to disable right click on your blog. You can either use CSS, JavaScript or HTML. If your blog or website runs on PHP, then you should consider using JavaScript to protect your contents. It wouldn’t take much of your time to set it up. In short, within five minutes you should be done protecting your content.
There may be some other reasons why you may want to disable right click on your website. While it may be good sometimes, it may be counterproductive in some occasions. Please follow closely the precise ways to use CSS, JavaScript and HTML to disable right click.
How to Disable Right Click Using CSS
You can disable right click with CSS codes in less than five minutes. The use of CSS is easy and fast to setup. Interestingly, it is one of the most effective ways to protect your contents. While some mobile browsers may not load JavaScript codes, there is a higher probability that CSS would be supported.
Normally, when you visit a web page, you can easily highlight each text on the page. What this script does is to disable that option and as a result right click wouldn’t work. I actually prefer CSS to JavaScript and HTML in this area. If you want to protect an article so that it cannot be copied, then you can use this method.
You can find the texts content of most web pages in the <body> tag. So when the CSS script is added to your site’s CSS file, your content would automatically be protected.
Well, if you would want to disable right click completely on your website, then you would have to use additional methods. A combination of CSS code and other codes would provide an enhanced content protection.
Here is the CSS code to disable to right click:
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;
}
You should include CSS snippet to your website CSS file. If you look at it carefully, the code above is for the <body> tag. After including the code, you can test your site and see if you would be able to copy with a right click.
How to Disable Right Click Using HTML Body Tag
The use of HTML <body> tag is another way that you can disable right click on your website. If you designed your web pages with a tool like Elementor, you can use it to add the oncontextmenu handler to your website.
With the use of a page builder, it is very easy to use HTML to protect your contents. You simply have to search for <body> on your web page and locate the source code of your site. Then modify the <body> tag.
Edit <body> to <body oncontextmenu=”return false;” >
It is quite easy to do this modification. Take a look at the code above, we simply added the oncontextmenu handler. That would help to disable right click and protect your content.
How to Disable Right Click Using JavaScript
You can disable right click by using JavaScript. This is the least effective way to disable right click. Thus, we would not recommend the use of this method. This is because some internet browsers can bypass this method. When your webpage does not load completely, then your JavaScript wouldn’t load as well. And some browsers have the option to turn off JavaScript and that forfeits this method of disabling the right click.
Add this HTML code to the <head> tag of your website:
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
After adding the script to your <head> tag, your content would be protected. But, not completely. As earlier mentioned, we do not recommend this method. There is a plugin called NoScript which renders this method useless. The plugin simply turns off JavaScript codes on a website.
How to Disable Right Click on WordPress
If you are using WordPress, there are several plugins to disable right click. You can install WP Copyright protection or Prevent Content Theft [Disable Right Click] by Shrinivas Naik.
Or you could click the “Add New” button on your WordPress plugin area and search for content protection protect, you would find some other effective plugins. Ensure to read the reviews before you install any plugin on WordPress. There’s no guarantee that a plugin that worked last year would still be working.
The Bottom Line
The use of CSS, JavaScript and HTML are some good methods for disabling right click on a site. However, complete content protection is never guaranteed. These methods would work for petty content thieves.
But for others, sadly there is nothing you can do. You content is usually downloaded to a browser, to a user can modify the browser to view your content the way he chooses.
If you really care about content protection, then you can make your website DCMA compliant. If you have any issue with anyone, you can then file a DCMA report.
The use of the methods in this article may be unlawful in some regions. When right click is disabled, it makes it difficult for visually impaired and elderly people to access your contents.
It is a form of discrimination against these individuals. So if in your region, using such content protection violates any rule, we would advice against so. You don’t want any legal complaint, right? Ofcourse not.
Zerofy Editorial is a team of writers determined to provide evergreen content to millions of readers worldwide.
