How to disable F12 Key in a page using JQuery

Introduction

In this post, we will see how we can disable F12 Key option using simple JQuery code. I hope you will like it.

Background

As you know disabling F12 Key option or disable right click in our page, does not makes the content secured. Even though that is the reality, I am sharing this post to show how to disable the F12 Key in page.

Using the code

We are going to use JQuery for this requirement. So you need to load the JQuery reference first.

[js]
<script src="http://sibeeshpassion.com/content/scripts/jquery-1.11.1.min.js"></script>
[/js]

Now we need to add the needful scripts.

[js]
<script>
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
</script>
[/js]

Here what we did is, whenever user press F12 , we are restricting that. We are applying this restriction to the entire document. And we use onkeypress ,onmousedown ,onkeydown event to do this requirement.

That is all. Everything is done and set. Now you need to see the output and demo right?

Demo

You can see a demo at Disable F12 Option Demo

You can see F12 option is not allowed in the demo page. You can always gives an alert also, if a user press F12.

Conclusion

I hope you liked my article. Now please share me your feedback. Thanks in advance.

Kindest Regards
Sibeesh Venu

2 thoughts on “How to disable F12 Key in a page using JQuery”

  1. this is failed with the below scenario…
    when open in new tab in FF the previous F12 page is also available for current restricted page…

Leave a Reply

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

Serverless 360