CODEWITHSUNDEEP
jquery
Internial
Internial

Reputation: 543

How can I block F12 keyboard key in jquery for all my pages and elements?

I have been trying to stop inspect element to the maximum amount. I know I can't stop them but still I would really like to reduce the chance. So how do I block the F12 keyboard key in all HTML elements?

Result: no one can access F12 and get inspect element.

Upvotes: 13

Views: 83952

Answers (3)

amarinediary
amarinediary

Reputation: 5449

Just wanted to share my two cents. You can't completely disable those options but you can limit the ease of usage.

onkeydown actions are pretty rare from a user standpoint. One could even argue that the only real use case scenario would be, form completion.

Taking that approach the most effective way would be to conditionally disable the event itself with an exception to specific targets, in our case, inputs and textareas.

document.onkeydown=function(e){if(!e.target.matches("input")&&!e.target.matches("textarea"))return!1};

A minimal and effective way of implementing this solution is to associate it with the <body> tag.

In the following example, in addition, I've added other behavior that are usually disabled when thinking of user ability restrictions (eg: user selection, dragging, right-click).

<body onkeydown="if(!event.target.matches('input')&&!event.target.matches('textarea'))return!1" oncontextmenu="return!1" onselectstart="return!1" ondragstart="return!1">

Upvotes: 1

PK-1825
PK-1825

Reputation: 1489

add below script in your file, in head section after Jquery.js file

     <script language="JavaScript">
      
       window.onload = function () {
           document.addEventListener("contextmenu", function (e) {
               e.preventDefault();
           }, false);
           document.addEventListener("keydown", function (e) {
               //document.onkeydown = function(e) {
               // "I" key
               if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
                   disabledEvent(e);
               }
               // "J" key
               if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
                   disabledEvent(e);
               }
               // "S" key + macOS
               if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                   disabledEvent(e);
               }
               // "U" key
               if (e.ctrlKey && e.keyCode == 85) {
                   disabledEvent(e);
               }
               // "F12" key
               if (event.keyCode == 123) {
                   disabledEvent(e);
               }
           }, false);
           function disabledEvent(e) {
               if (e.stopPropagation) {
                   e.stopPropagation();
               } else if (window.event) {
                   window.event.cancelBubble = true;
               }
               e.preventDefault();
               return false;
           }
       }
//edit: removed ";" from last "}" because of javascript error
</script>

Upvotes: 16

Sadikhasan
Sadikhasan

Reputation: 18600

Here 123 is the keyCode of F12 which opens the Inspect Element screen in the browser. Adding a keydown event than only does return false for 123 will block the Inspect Element screen.

$(document).keydown(function (event) {
    if (event.keyCode == 123) { // Prevent F12
        return false;
    } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I        
        return false;
    }
});

Prevent Right Click > Inspect Element

$(document).on("contextmenu", function (e) {        
    e.preventDefault();
});

Demo

Upvotes: 51

Related Questions