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?

i thought you will have to do it for whole page because only one element cant be restricted while accessible whole page — Newton Singh, Feb 15 '19 at 07:26
Using right click any one can remove the disabled option.I want to prevent it — , Feb 15 '19 at 07:29
You can't. It's been sent to the browser, users can inspect it. — brombeer, Feb 15 '19 at 07:29
Similar question has been asked here: https://stackoverflow.com/questions/7559409/how-to-disable-browser-developer-tools — Nikola Kirincic, Feb 15 '19 at 07:32
_“Using right click any one can remove the disabled option.I want to prevent it”_ - no, what you actually want, is to not use the value that gets send back for anything in the first place. The output is based on a value you have available server-side already - so there is not good reason to take this value from the form data set in the first place, when you are processing the rest of this request. — 04FS, Feb 15 '19 at 08:06

score 4 · Answer 1 · answered Feb 15 '19 at 07:26

4

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.

answered Feb 15 '19 at 07:26

Roshan

786
1
9
20

A lot of websites add some scripts to prevent F12 and context menu – Hien Nguyen Feb 15 '19 at 07:36
Yes you can disabled those buttons, `ctrl`+`shift`+`I` or `ctrl`+`shift`+`C` or `F12` or `ctrl`+`shift`+`J` well there's many more and I think you cannot just disable those buttons. – Roshan Feb 15 '19 at 07:41
1

@HienNguyen, but you can't disable all approaches – Nikola Kirincic Feb 15 '19 at 07:51

Hien Nguyen · Answer 2 · 2019-02-15T07:55:47.007

2

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;
      }
    }

edited Feb 15 '19 at 07:55

answered Feb 15 '19 at 07:35

Hien Nguyen

24,551
7
52
62

And what about other shortcuts to dev tools? Or through browser's menu? It can't be prevented 100%. Developer can't lean on this as a security measure. – Nikola Kirincic Feb 15 '19 at 07:47

Nikola Kirincic · Answer 3 · 2019-02-15T07:42:28.063

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
}

score 1 · Answer 4 · answered Feb 15 '19 at 14:26

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.

score 0 · Answer 5 · answered Feb 15 '19 at 07:29

0

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 />

answered Feb 15 '19 at 07:29

M.Hemant

2,345
1
9
14

Prevent inspect element in text field

5 Answers5

Linked