Introduction:
Opening the console log of browser and change element value of a web page is like a headache for the developer. To prevent this situation here is the remedy.
Description:
So how to stop this kind of situation, you could get a message while user is opening the console log and take necessary step or you could prevent user from opening that. We will discuss both the situation in this article one by one.
Getting noticed while opening the console of the browser:
Create a normal HTML page and and add a div to show the status of the development tool box. And write down the code.
After that write down the code within the script tag under body section.
Output:
Prevent Clicking F12 and Mouse Right Click:
This trick is not like showing status. By showing status you can do all your customization in your code but here in this example of coding user will not be able to click F12 and mouse right click. Lets see how.
Before starting add JQuery into your page. To add it add the bellow script to the top of all the JQuery code.
After that within a script tag write down the bellow code.
As you can see we have used the Key code to detect the clicking of buttons and mouse. Here 123 stands for F12 and 73 for I key. To know more visit https://msdn.microsoft.com/en-us/library/aa243025(v=vs.60).aspx.
Run both the examples and enjoy.
Opening the console log of browser and change element value of a web page is like a headache for the developer. To prevent this situation here is the remedy.
Description:
So how to stop this kind of situation, you could get a message while user is opening the console log and take necessary step or you could prevent user from opening that. We will discuss both the situation in this article one by one.
Getting noticed while opening the console of the browser:
Create a normal HTML page and and add a div to show the status of the development tool box. And write down the code.
<body>
status: <div id="status"></div>
</body>
After that write down the code within the script tag under body section.
<script>
var checkStatus;
var element = new Image();
element.__defineGetter__('id', function () {
checkStatus
= 'on';
});
setInterval(function () {
checkStatus
= 'off';
console.log(element);
console.clear();
document.querySelector('#status').innerHTML = checkStatus;
}, 1000)
</script>
Output:
Prevent Clicking F12 and Mouse Right Click:
This trick is not like showing status. By showing status you can do all your customization in your code but here in this example of coding user will not be able to click F12 and mouse right click. Lets see how.
Before starting add JQuery into your page. To add it add the bellow script to the top of all the JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
After that within a script tag write down the bellow code.
<script>
$(document).keydown(function (event) {
if (event.keyCode == 123) {
return false;
}
else if (event.ctrlKey &&
event.shiftKey && event.keyCode == 73) {
return false;
}
});
$(document).on("contextmenu", function (e) {
e.preventDefault();
});
</script>
As you can see we have used the Key code to detect the clicking of buttons and mouse. Here 123 stands for F12 and 73 for I key. To know more visit https://msdn.microsoft.com/en-us/library/aa243025(v=vs.60).aspx.
Run both the examples and enjoy.
