0

Is it possible to prevent any kind of input in a text field using JavaScript? Especially including:

  • Typing text on the keyboard (can be caught via keydown event)
  • Pasting text using context menu (can be caught via paste event)
  • Cutting text using context menu (can be caught via cut event)
  • Deleting text using context menu
  • Replacing text using browser's built-in spellchecker via context menu
  • Inserting emojis using context menu in Chrome for example

The readonly property is semantically the way to go but it doesn't work with built-in form validation if the field is set to required (or does it with extra JS logic?).

Capturing the focus event and triggering blur right away prevents selecting and copying text.

Storing the input's value on focus and setting it after each change event would sort of work, but the content would flash for a moment.

Any ideas?

Edit: Some people have asked why I need to do this and that it makes no sense. First of all, I know the value can be set via the browser developer tools and I also know that proper backend validation is required, it is there. The idea behind the question is the following: I have a file input field. In order to style it properly, the actual <input type="file"> is hidden and a Bootstrap input group is used with a text field and a browse button beside (the button is the hidden file field's label so clicking it really opens the select file dialog, that works in all browsers tested). As soon as the user selects a file, the text field is updated to show the filename(s). The text field displaying the filename(s) has the HTML5 attribute set to required so any form submission will have the browser check if the text field is empty and if so, display an error. If I set the text field to readonly or disabled, the field won't get validated by the browser on submit. I would like to have the browser perform the validation and not custom JS code so that the validation of the fields is performed in the order the fields appear on the page and so that all pre-submit errors have the same look and feel.

Edit 2: One more thing, since the actual file input field is hidden, setting it to required instead of the text field displaying the filename(s) leads to the following error by Chrome: "An invalid form control with name='myfancyname' is not focusable."

  • Why do you need to prevent any kind of input? Could you provide more explanations? – Kévin Bibollet Sep 13 '19 at 13:21
  • 2
    Makes no sense.... if the user can not change the value or alter it, why do you even allow the user to see it in a field? The serverside should have it and only use that value there. The user can just go into dev tools and alter the value and skip all your security measures. – epascarello Sep 13 '19 at 13:24
  • The field is set programatically and should be validated by the browser on form submit just like other fields of the form. –  Sep 13 '19 at 13:25
  • @epascarello Backend validation happens anyways and that is not the question asked. –  Sep 13 '19 at 13:27
  • @smares the issue is there is NO way to prevent it from being altered. You can do whatever you want on the client, it still can be changed. Still not sure how it would fail on validation if the value can not be changed.That is what has me confused. lol Not sure how it can be required, if it can not be altered. – epascarello Sep 13 '19 at 13:28
  • Plenty of questions on copy paste prevention: https://stackoverflow.com/questions/21743267/html-page-disable-copy-paste – epascarello Sep 13 '19 at 13:30
  • @epascarello That is why I already stated in the post that paste can already be caught via the paste event. –  Sep 13 '19 at 13:32
  • What I do for text that can not change: Set it as a hidden input in the form. Add some sort of text only display of the value in the form for the user to see. On backend make sure hidden input it what it should be. – epascarello Sep 13 '19 at 13:33
  • @epascarello The field is set programatically. Its initial value is empty. Having it readonly or disabled would not validate it by the browser's validation on form submit. Of course I could add JavaScript code to issue a custom error but I would like the errors to have the same look and feel as the other browser validation errors. Besides, no need to send it to the backend if I know beforehand that the validation would fail because the field is empty. –  Sep 13 '19 at 13:34
  • Updated my post to address some of the questions asked. –  Sep 13 '19 at 13:54

3 Answers3

0

you can try event.preventDefault on keydown (and copy, paste, cut too if needed) event of input element. Check this link for documentation https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault.

I have a sample implementation here https://jsfiddle.net/ytx192ca/

I am curious though about the use case since if you need a field where user can't change anything then why not use span, p or anything else than input element

S4beR
  • 1,872
  • 1
  • 17
  • 33
  • To have it validated by the browser's form validation on submit. Before you ask, I already do a validation on backend side, too. –  Sep 13 '19 at 13:37
  • but it's a readonly field right? so user has no control on the value, do you really need to validate it? – S4beR Sep 13 '19 at 13:38
  • It's supposed to be readonly and the user has to do something (select a file) for the field to change its value. All I want to do is display a hint in the browser's style that the user forgot to select a file. –  Sep 13 '19 at 13:43
  • you can always display such warning using `span` or `p` when file selection is changed. That way users won't be able to cut or delete the message nor they will be able to edit. But yeah if you wish to go with `input` then you have to add extra JS which I mentioned in my answer. Seems overkill though – S4beR Sep 13 '19 at 13:47
  • Updated my post to address some of the questions asked. –  Sep 13 '19 at 13:53
  • Using a `p` or `span` you can't do browser's form validation but you can rely on JS for that by capturing the `onsubmit` event. It's a choice, either you block editing on input element using JS or do form validation using JS. Personally I would prefer to validate form using JS in this case because of usability but check the JSFiddle that I have shared, that should be able to help you – S4beR Sep 13 '19 at 15:01
0

It appears there isn't a full-proof way how to handle the original question.

In my specific case described in the edit I was able to work around the problem by not using display: none for the file input but making it invisible via opacity: 0. With this change, it was possible to make the file input element itself have the required attribute set that I wanted for form validation. The text field that I wanted to fake readonly can now really be readonly as I no longer need it for form validation.

-1

in your js do something like this:

 $('#test').attr('readonly', true);
hajdarevicedin
  • 59
  • 7
  • Besides, boolean properties should be set using .prop() rather than .attr() –  Sep 13 '19 at 13:30