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

Question

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.

Answer 1

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

Answer 2

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>