Disable Right Click On WebPages – HTML, CSS & Jscript

0
52
ads

This article teaches you how to prevent content stealing by disabling/deactivating mouse right-click on any webpages, WordPress & browser using HTML, CSS, & javascript code.

 

disable right click on web page with html css and JavaScript

 

Many people these days, will visit your blog, highlight your content, right-click they copy and repeat. They still termed themselves, blogger. 

To fight this indecent act, Howtechwork has compiled some working method here to deactivate mouse right-click on any webpages. To prevent this counterfeit blogger from copying your content.

We will show you how to disable/deactivate right-click in Html, CSS and javascript.

However, disabling right-click on a website only stop some real human from copying your content. It can not prevent the sophisticated scrapper available in the market today.

It cannot even stop all human. If any geek wants your content at all cost, there are always ways to get it. Even after you’ve deactivated right click on your website or page.

Also keep in mind that, disabling right-click on any webpage can annoy most of your legit user’s who are not there to copy your content. It sometimes affects the accessibility of your website, has user may not be able to navigate & interact easily with your content.

ads

For example, deactivating right-click on your site also means your user cannot open another link in a new tab. So, therefore, use it wisely.

 

ALSO READ  Remix OS: How to install remix OS on Windows PC

Deactivate/disable right click using HTML 

You can use a simple HTML tag to stop right-click on any element on your website, or any CMS system, e.g. WordPress, Blogspot etc.

Add the below code to the HTML body of your website & it will prevent /stop right-click from working on such page.

<body oncontextmenu="return false;">

The on the context menu is an Html attribute that disables right-click on an Html document, just set its value to “return false”. It works fine.

 

Deactivate text selection with CSS 

This one is my favourite method of protecting your website post by disabling right-click with CSS code.

This CSS trick is even more preferred than javascript because many content stealers are not yet aware of it. If a user disables javascript in its browser, then it can bypass the javascript method. But with this CSS way of disabling right-click, it cannot be easily bypassed.

Though we are not deactivating right-click here, we are just using the user-select CSS property to disable the ability to select text.

So when you right-click, on the context menu you won’t see the copy option.

This code uses the CSS tag selector to select the HTML body tag, and disable text selection on the popular browser platform.

Add the CSS snippet below to your site CSS code to disable right click and test selection.

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;
}

 

ALSO READ  Guess a password: common tricks to guess any password

Disabling Right Click with Javascript 

This the most popular content protection method among web developers using Javascript or jquery to disable right click on a website. 

To me, it is no longer a reliable method; you may need to combine it with other Html and CSS trick to be safe.

If a user disables javascript in his or her browser, be it google chrome, firefox or opera, this method can be bypassed.

Below is the javascript code to add to the head section of your HTML code.

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

Am sure we know that javascript is a programming language, not just a markup language like HTML or a styling language like CSS.

So, therefore, the above JScript code is written base on my logic. you can deactivate right-click using different javascript syntax & function. it all depends on the programmer’s problem-solving skills.

 

Wrap up

The three content protection method above works on your self wrote HTML code. It also works on any CMS platform.

You can use it to disable or deactivate right mouse click in WordPress, Joomla, blogger etc.

This post is just a short guide on content protection; A definite guide is coming soon that will cover almost all aspect of online content safety.

If you find this tutorial informative,  Feel free to share with your family and friends.

Do you face any problems while trying to implement this technique, kindly use the comment box below to get help.

Thanks cheer.

 

Ads

LEAVE A REPLY

Please enter your comment!
Please enter your name here