How to prevent a user from entering a text field without disabling the field?

Question

I tried:

$('input').keyup(function() { $(this).attr('val', ''); }); 

but after entering the letter, it slightly deletes the entered text. In any case, so that the user does not completely enter the text without resorting to disabling the text field?

Answer 1

A non-Javascript alternative that can be easily missed: can you use the readonly attribute instead of the disabled attribute? This prevents editing the text in the input file, but browsers enter in different ways (it is less likely that it is grayed out), for example, <input readonly type="text" ...>

Answer 2

if you don't want the field to look "disabled" or smth, just use this:

 onkeydown="return false;" 

it's basically the same as greengit and Derek but a little shorter

Answer 3

 $('input').keydown(function(e) { e.preventDefault(); return false; }); 

Answer 4

 $('input').keypress(function(e) { e.preventDefault(); }); 

Answer 5

Markup

 <asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;" TabIndex="1"> 

Script

 function preventInput(evnt) { //Checked In IE9,Chrome,FireFox if (evnt.which != 9) evnt.preventDefault();} 

Answer 6

just use onkeydown = "return false" for the control tag, as shown below, it will not take values ​​from the user.

  <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" ontextchanged="txtDate_TextChanged" onkeydown="return false" > </asp:TextBox> 

Answer 7

if the text appears before the keyboard is activated, then it probably fires when the keydown event occurs. Have you tried anything else?

Answer 8

Another method that you can use depending on the need of $('input').onfocus(function(){this.blur()}); I think that is how you write it. I do not own jQuery.

Answer 9

I like to add one that also works with dynamically creating Davascript DOM, like D3, where it is impossible to add:

 //.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE ! 

to prevent actions on the DOM input element in HTML add readonly to the class:

 var d = document.getElementById("div1"); d.className += " readonly"; 

OR in D3:

  .classed("readonly", function(){ if(condition){return true}else{return false} }) 

And add to CSS or less:

 .readonly { pointer-events: none; } 

The best part about this solution is that you can dynamically turn it on and off in functions so that it can be integrated, for example, into D3 during creation (impossible with a single attribute "readonly").

to remove an item from a class:

 document.getElementById("MyID").className = document.getElementById("MyID").className.replace(/\breadonly\b/,''); 

or use jquery:

 $( "div" ).removeClass( "readonly" ) 

or switch class:

 $( "div" ).toggleClass( "readonly", addOrRemove ); 

Just to be complete, good luck = ^)

Answer 10

One option is to attach a handler to the input event.

The advantage of this approach is that we do not prevent the keyboard behavior that the user expects (for example, tab, page up / down, etc.).

Another advantage is that it also handles the case when the input value is changed by inserting text through the context menu.

This approach works best if you only care about leaving the entry empty. If you want to save a specific value, you will have to track it somewhere else (in the data attribute?), Since it will not be available when the input event is received.

 const inputEl = document.querySelector('input'); inputEl.addEventListener('input', (event) => { event.target.value = ''; }); 

 <input type="text" /> 

Tested on Safari 10, Firefox 49, Chrome 54, IE 11.

Answer 11

If you want to prevent the user from adding anything, but give him the ability to delete characters:

 <input value="CAN'T ADD TO THIS" maxlength="0" /> 

Setting the maxlength attribute for login makes it such that the user cannot add content, but he can still erase it as he sees fit.

---

But if you want it to be truly constant and unchanging:

 <input value="THIS IS READONLY" onkeydown="return false" /> 

If for the onkeydown attribute return false entry ignores the user keypresses , which prevents them from changing or influencing the value.