Prevent inspect element in text field

Question

Here is my input field disabled code

<input type="text" class="empl_date form-control" id="staffid" name="staffid" value="<?php echo $employeeworks[0]['employeeCode'];?>" arsley-maxlength="6" placeholder=" Schedule Date"  disabled />

How can i prevent inspect element option in this field?

Answer 1

You can prevent inspect by right click.

This way to prevent right click

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

If user press F12 and click arrow button and inspect, it still ok. You also can prevent F12 by this code

 document.onkeydown = function(e) {
      if(event.keyCode == 123) { //F12 keycode is 123
         return false;
      }
    }

Answer 2

No it's not possible.

Code inspectors are designed for debugging HTML and Javascript. They will always do show the live DOM object of web page. It means that it reveals the HTML code of everything you see on the page, even if they're generated by Javascript.

Answer 3

Actually, you can not restrict user to check inspect element of any specific element but you can disable completely. Check below code which will not allow user to open debugger and not even page source.

document.onkeydown = function(e) {
  if(e.keyCode == 123) {
      e.preventDefault();
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
      e.preventDefault();
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
      e.preventDefault();
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
      e.preventDefault();
     return false;
  }
  if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
      e.preventDefault();
     return false;
  }
}

But this code also has some missings as well. Hope it helps you.

Answer 4

As mentioned in other answers, it can't be prevented fully, once it is in the browser, user can manipulate it. Rather than thinking how to prevent the inspect element or dev tools being used on your input, you should think about your goal, what do you want to achieve with this?

If you want to prevent from input value being changed, use some hash generated on server side, that includes value from your staffid field and store it in hidden input.

When user submits the form, just regenerate hash using staffid value and hash value from input. If they don't match, user has manipulated the staffid input manually.

Example:

<input type="text" class="empl_date form-control" id="staffid" name="staffid" value="<?php echo $employeeworks[0]['employeeCode'];?>" arsley-maxlength="6" placeholder=" Schedule Date"  disabled />
<input type="hidden" name="hash" value="<?php echo md5($employeeworks[0]['employeeCode'] . 'some salt to avoid user just generating hash with md5 using value only'); ?> /> 

and then on submission:

$staffid = filter_input(INPUT_POST, 'staffid');
$hash_input = filter_input(INPUT_POST,'hash');

$hash_check = md5($staffid . 'some salt to avoid user just generating hash with md5 using value only');
if($hash_input !== $hash_check){
//looks like the user manipulated staffid value, throw a validation error
}

Answer 5

Try This,

<input type="text" oncontextmenu="return false;" class="empl_date form-control" id="staffid" name="staffid" value="<?php echo $employeeworks[0]['employeeCode'];?>" arsley-maxlength="6" placeholder=" Schedule Date"  disabled />