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! 🚀🔒
Table of Contents
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.
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>