12

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.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Internial
  • 423
  • 2
  • 7
  • 13

3 Answers3

50

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

Ethan
  • 4,295
  • 4
  • 25
  • 44
Sadikhasan
  • 18,365
  • 21
  • 80
  • 122
  • 3
    I can still Right click and then Click Inspect element :) – Pratik Joshi Feb 18 '15 at 04:39
  • 6
    1.Still if i press Control+shift+i -> It opens developer panel . 2.Also , top right square in chrome -> More tools -> Developer tools ,it opens . – Pratik Joshi Feb 18 '15 at 04:47
  • @jQuery.PHP.Magento.com Sorry for that I have no idea. – Sadikhasan Feb 18 '15 at 05:07
  • 3
    We cant control whatever is Outside browser window :) . At least you tried your best to eliminate all possibilities Inside browser window. ! – Pratik Joshi Feb 18 '15 at 05:10
  • test on execution(right down) window not in coding window – Rajiv Choudhary Nov 30 '16 at 09:18
  • @PratikCJoshi You can't block the client to use the F12 debugger, but this is perfect answer is to question and even **Internial** knows it's not possible – Vinod Srivastav May 09 '17 at 06:51
  • Along with this solution, try to open your content in a new window like this - `window.open(YOUR_URL, 'windowName', 'location=0,menubar=0,resizable=0,scrollbars=1,status=1,toolbar=0,fullscreen=1,channelmode=1');` – AnkitK Jun 13 '18 at 13:11
  • If @Sadikhasan answer is not working then add below code to your global js file document.addEventListener("contextmenu", function(e){ e.preventDefault(); //Prevent right click }, false); document.onkeydown = function (event) { event = (event || window.event); if (event.keyCode == 123) { // Prevent F12 return false; } else if(event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I return false; } } – SAJAL MATHUR Jul 02 '20 at 20:38
  • But what about [Ctrl]+[Shift]+[J]? – RixTheTyrunt Nov 25 '22 at 20:53
12

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>
PK-1825
  • 1,431
  • 19
  • 39
0

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">
amarinediary
  • 4,930
  • 4
  • 27
  • 45