How to disable right click and F12 Key using javaScript

How to disable right click and F12 Key using javaScript

Last Updated: 5 months ago

If you're a web developer, you know how important it is to protect your code and design from being copied. But have you ever wondered if there was a way to disable right click and the F12 key on your website? Well, with JavaScript, you can do just that! In this article, we'll show you how to use JavaScript to disable right click and the F12 key so that your designs are safe from being copied.

Introduction

JavaScript is a programming language that can be used to disable certain features on web pages, such as the right click or F key. While this may be desirable in some cases, it can also be considered a security risk, as it can prevent users from being able to use certain functions of their browser or computer. In this article, we will show you how to disable right click and F key using JavaScript.

What is right click and F12 Key?

The right click is a contextual menu command on a Windows PC. It can be used to open a program, file, or folder. The F12 key is a function key on a keyboard. It is typically used to open a help menu or to access system settings.

Reasons to disable right click and F12 Key

If you are a web developer, you may want to disable the right click and F12 key on your website for security reasons. By disabling these keys, you can prevent users from viewing the source code of your website or using the Developer Tools to inspect your website.

There are two ways to disable the right click and F12 key on your website. You can either use a JavaScript snippet or adding an element to your body tag.

Using a JavaScript snippet is the easiest way to disable the right click and F12 key on your website. To do this, simply add the following code to your website:

To disable Right click using body tag, you can use this code

  <body oncontextmenu="return false;">

To disable Right click using JavaScript code, you can use this code

// DISABLE RIGHT CLICK      
    document.addEventListener('contextmenu', event => event.preventDefault());

To disable F12 key using JavaScript code, you can use this code

// DISABLE F12      
    document.onkeydown = function (e) {       
        if(e.keyCode == 123) {       
            return false;       
        }       
}

To disable I key using JavaScript code, you can use this code

// DISABLE I       
   document.onkeydown = function (e) {       
        if(e.ctrlKey && e.shiftKey && e.keyCode == 73){       
            return false;       
        }       
}

To disable J key using JavaScript code, you can use this code

// DISABLE J      
    document.onkeydown = function (e) {       
        if(e.ctrlKey && e.shiftKey && e.keyCode == 74) {       
            return false;       
        }       
}

To disable U key using JavaScript code, you can use this code

// DISABLE U      
    document.onkeydown = function (e) {       
        if(e.ctrlKey && e.keyCode == 85) {      
            return false;      
        }      
}

But Wait.... ☝ Why do you like to disable right click or F12?

Do you have any specific reason that you want to do by detecting the user while he is performing these actions?

For whatever reason let me give you the clear advantages and disadvantages of these actions.

Advantages of Disabling Right Click And F12 Key

You can prevent users from copying your code.
You can prevent users from knowing your code structure. How 🤨? They may know which element is applied to which style.
You can display an alert message when someone tries to right click on your page

Disadvantages of disabling right click and F12 Key

If you're making this to prevent from copying your source code 😀 My brother, You don't know that they can see your whole web page source code by just adding view-source: in front of your web page URL, Just add it infront of any URL then you will see whole source code of the Web page. So disabling right click and F12 is just to make it harder and NOT the method of preventing source code.
If you're making this to prevent hackers trying to hack your website 😀 My brother, You don't know, that hackers don't use browser to perform hacking on websites? Let me tell you that, hackers use another methods to hack any system and even if they use browser to hack they are not using it like normal users that is somehow they know how can they see your source code structure.
It can be difficult to troubleshoot problems on your website if these keys are disabled, as you know We developers use the Developer Tools to debug any errors especially during development time .

You should have a clear reason to disable these features. If not, you're just trying to attract the attention of other content thieves on the internet.

Simply get everything in one code that is summarised.

// DISABLE RIGHT CLICK      
    document.addEventListener('contextmenu', event => event.preventDefault());       
// DISABLE F12      
    document.onkeydown = function (e) {       
        if(e.keyCode == 123) {       
            return false;       
        }       
// DISABLE I       
        if(e.ctrlKey && e.shiftKey && e.keyCode == 73){       
            return false;       
        }       
// DISABLE J      
        if(e.ctrlKey && e.shiftKey && e.keyCode == 74) {       
            return false;       
        }        
// DISABLE U      
        if(e.ctrlKey && e.keyCode == 85) {      
            return false;      
        }      
}

Bonus

If you are concerned that your visitors will save your images, you can use the CSS code below. As a result, your image downloaders may experience difficulties. However, They can download it in other ways too.

your-img-tag-name {      
  pointer-events: none;      
}

By doing so, you remove the save as image option when a user right-clicks on an image to save it. I wrote the above code if you only want to prevent users from saving your images.

And That's it, I hope you have got the solution If not, or if you have any questions, please leave them in the comment box.

Happy coding 😀