How to disable right click on Website ?
You create a website, a blog, you write its content with passion and because that content is written by you no on else should have credit for it but it is internet and there are people who constantly copy other people stuff and make it their own. So, what are the ways to protect your content from getting plagiarised ? But before all of this the bigger question is that 'Can you really protect your data?', the answer is 'NO'. Yes, you have read it right there is no way you can protect your data from getting plagiarised because even if you disble right clicks, people can directly write your content from there computer screen or they can take screenshots, thanks to the technology.
But there is one thing you can do, you can make it harder for them to copy the content. You can disable right clicks so they couldn't copy and paste, you can give them warning about the plagiarism, etc. Also, google itself can identify the plagiarism. Let's see some methods you can use to protect your precious content:
The users nowadays have become very smart, they can go around these methods of protection and can plagiarise your content but still not many users know about all these tricks to nullify the methods discussed below. So, using these methods will still save the website from lot of people. Here are some of the methods which users can apply to get past the protection methods:
- They can disable loading of JavaScript in their browsers.
- They can directly view the source code and then can locate the text or image they want to copy in the source code.
Let's see the methods one by one, which can protect your data may be not completely, but to some extent:
Solution 1: Show warning message on Image click
This method doesn't really protect the data but you can give the user a warning when he tries to copy the content from your website. You can write the legal warning by yourself as a pop-up message. In the example below we have protected an image, whenever a user clicks on that image the warning will be shown. You have to add the code written below in between the <head> </head> tags.
Example
Try this code »
<script language="JavaScript" Type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
-->
</script>
After adding the script code you have to create an event listener with the image you want to protect.
Look below the code you have to write in the <img> tag.
<IMG SRC="issues/pictures/cexample.gif" onMouseDown="popupMsg('This image is Copyrighted -- CodeRepublics 2019')">
Explanation:
In the above example The event listener 'onMouseDown' is used which will envoke the popup message whenever user presses any mouse button on the image. And after the 'click' the anything written on inside 'popupMsg' will be displayed to the user in the form of an 'alert box'.
Below is the live example of the warning message. Click on the div below and see the results.
Live Example
Solution 2: Disable right click by using JavaScript
The above example just give warning to the user which a user can easily ignore and can continue his copying work but here in this method by using JavaScript you can disable the right click of the mouse on the website. The right click provide the option to copy the content but if you disable it, then the right click will not give any option to the user. Unless user knows some other tools to copy, this method would be sufficient for protection of the content.
You just paste this JavaScript code in your website's script and it will start working.
Example
Try this code »
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
Solution 3: Disable right click, drags, and text selection by using HTML.
You can easily use HTML attributes also, to disable drags, right clicks and text selection. HTML have some proper attributes to help you in this situation, the only drawback is that these attributes now only work on Internet Explorer. But still if you want to add this in your code, let us explain this to you.
- oncontextmenu : It invokes when user right clicks on the website.
- onselectstart : It invokes when user start selecting the content.
- ondragstart : It invokes when user drags some image or any other content from the website.
Example
Try this code »
oncontextmenu="return false" onselectstart="return false" ondragstart="return false"
Just add the above written code within the body tag like this:
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
Solution 4: Disable the Right click and Keyboard shortcuts.
Apart from all the methods above, there is another lock of JavaScript code which you can add to your website to disable right clicks and also some keyboard shortcuts. It will block shortcuts like Ctrl + Shift + I, Ctrl+ Shift + J, Ctrl + S, Ctrl + U, and also F12 key. The F12 key is very important to disable because it can open the whole console which can display all the code of your website.
Example
Try this code »
<script language="JavaScript">
window.onload = function() {
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
document.addEventListener("keydown", function(e) {
/*document.onkeydown = function(e) {
"I" key*/
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
/* "J" key */
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
/* "S" key + macOS */
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
/* "U" key */
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
/* "F12" key */
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e){
if (e.stopPropagation){
e.stopPropagation();
} else if (window.event){
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
};
</script>
Conclusion:
So, all the solution discussed above can be used to protect your data to some extent, but we all know that it cannot be fully protected. Still, 'Something is better than nothing', we can hope that these solutions will work. Best of Luck.