Disabling Right-Click On Website

26 August 2023
Disable Right Click on Your Website
194
Views

Hey there, Have you ever been concerned about someone easily copying or getting hold of the precious content you’ve put on your website? In the post, we are going to introduce a simple JavaScript trick named Disabling Right Click that can help you increase the security of your webpage. We’ll break it down step by step, so don’t worry if you’re not a coding expert – we’ll make it easy to understand.

That’s where our JavaScript code approach comes in. We’re going to play around with some code that aims to make it a tad tougher for folks to right-click, use context menus, or even use certain keyboard shortcuts on your site.

Now, let’s not get too overwhelmed – we’ll go through each piece of code like a friendly stroll in the park. You don’t need to be a tech guru to follow along. At the end of the post, you will understand that how this code works on the website and what it means for your website security.

So, if you’re ready to give your website an extra layer of protection by disabling right-click and keeping those copycats at bay, let’s jump right in and explore this JavaScript magic together! 🚀🔒

Step 1: The HTML Structure

First, let’s look at the basic HTML structure of our webpage:

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
    <script>
        // JavaScript code will go here
    </script>
</head>
<body>
    <!-- Your body content here -->
</body>
</html>

We have an HTML document with the usual <head> and <body> sections. Inside the <head>, we have a <script> element where we’ll write our JavaScript code.

Learn Smooth Scrolling

Step 2: The JavaScript Function

We are going to introduce you to an excellent JavaScript function that we have named “disable()”. This little guy is your secret weapon against unwanted right clicks, context menu interference, and those tricky keyboard shortcuts that could open the source code of your precious webpage

Think of “disable()” as the guardian of your webpage’s content – it’s here to make sure no one slips through the cracks and gains access to what you’ve worked so hard to create.

In a nutshell, “disable()” is your shield against prying eyes and curious hands.🛡️🔒

function disable() {
    // Disable the context menu (right-click)
    document.addEventListener('contextmenu', event => event.preventDefault());

    // Show an alert to inform users about the restriction
    alert("You cannot view the source code ☺☺☺ !!!");

    // Disable specific keyboard shortcuts
    document.onkeydown = function(e) {
        if (e.ctrlKey && 
            (e.keyCode === 67 || 
            e.keyCode === 86 || 
            e.keyCode === 85 || 
            e.keyCode === 16 ||
            e.keyCode === 117)) {
            alert('You cannot view the source code ☺☺☺ !!!');
            return false;
        } else {
            return true;
        }
    };
}

Inside the disable() function, we perform the following actions:

We use the addEventListener method to prevent the context menu (usually shown on right-click) from appearing. This tries to prevent users from accessing browser features like copying or inspecting elements etc.

We are also showing an alert message to users that they can not view the source code.

We set up an event listener for the keydown event (keyboard key press). If users press certain keyboard shortcuts like Ctrl+C (copy), Ctrl+V (paste), Ctrl+U (view source), etc., we show another alert and prevent the default behavior.

Step 3: Calling the Function

Now that we have our function defined, we need to call it when the webpage loads. We use the DOMContentLoaded event to make sure our code runs only after the entire webpage has loaded.

document.addEventListener('DOMContentLoaded', function() {
    // Call the disable function when the DOM is fully loaded
    disable();
});

Here we are listening the a javascript listener which is DOMContentLoaded. When the DOM is fully loaded, it triggers the disable() function we defined earlier.

Conclusion

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
    <script>
        function disable() {
            document.addEventListener('contextmenu', event => event.preventDefault());
            alert("You cannot view the source code ☺☺☺ !!!");
            document.onkeydown = function(e) {
                if (e.ctrlKey && 
                    (e.keyCode === 67 || 
                    e.keyCode === 86 || 
                    e.keyCode === 85 || 
                    e.keyCode === 16 ||
                    e.keyCode === 117)) {
                    alert('You cannot view the source code ☺☺☺ !!!');
                    return false;
                } else {
                    return true;
                }
            };
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Call the disable function when the DOM is fully loaded
            disable();
        });
    </script>
</head>
<body>
    <!-- Your body content here -->
</body>
</html>
Article Categories:
JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *