How to prevent user from typing in text field without disabling the field

Question

I tried      input   keyup function           this  attr  val               but it removes the entered text slightly after a letter is entered  Is there anyway to prevent the user from entering text completely without resorting to disabling the text field

User · Answer

If you want to prevent the user from adding anything, but provide them with the ability to erase characters:

_x000D_

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

_x000D_

Setting the maxlength attribute of an input to "0" makes it so that the user is unable to add content, but still erase content as they wish.

But If you want it to be truly constant and unchangeable:

_x000D_

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

_x000D_

Setting the onkeydown attribute to return false makes the input ignore user keypresses on it, thus preventing them from changing or affecting the value.

User · Answer

A non-Javascript alternative that can be easily overlooked  can you use the readonly attribute instead of the disabled attribute  It prevents editing the text in the input  but browsers style the input differently  less likely to  grey it out   e g   lt input readonly type  text      gt

User · Answer

Markup   lt asp TextBox ID  txtDateOfBirth  runat  server  onkeydown  javascript preventInput event    onpaste  return false                                   TabIndex  1  gt      Script  function preventInput evnt      Checked In IE9 Chrome FireFox if  evnt which    9  evnt preventDefault

User · Answer

if you don t want the field to look  disabled  or smth  just use this   onkeydown  return false     it s basically the same that greengit and Derek said but a little shorter

User · Answer

just use onkeydown  return false  to the control tag like shown below  it will not accept values from user        lt asp TextBox ID  txtDate  runat  server  AutoPostBack  True  ontextchanged  txtDate TextChanged  onkeydown  return false   gt       lt  asp TextBox gt

User · Answer

input   keydown function e       e preventDefault       return false

User · Answer

One option is to bind a handler to the input event   The advantage of this approach is that we don t prevent keyboard behaviors that the user expects  e g  tab  page up down  etc     Another advantage is that it also handles the case when the input value is changed by pasting text through the context menu   This approach works best if you only care about keeping the input empty  If you want to maintain a specific value  you ll have to track that somewhere else  in a data attribute   since it will not be available when the input event is received    x000D   x000D  const inputEl   document querySelector  input    x000D   x000D  inputEl addEventListener  input    event    gt    x000D    event target value       x000D      x000D   lt input type  text    gt  x000D   x000D   x000D    Tested in Safari 10  Firefox 49  Chrome 54  IE 11

User · Answer

input   keypress function e        e preventDefault

User · Answer

One other method that could be used depending on the need    input   onfocus function   this blur       I think this is how you would write it  I am not proficient in jquery

User · Answer

For a css-only solution  try setting pointer-events  none on the input

User · Answer

I like to add one that also works with dynamic javascript DOM creation like D3 where it is impossible to add      attr function   if condition   readonly  else        INCORRECT CODE     to prevent actions on a HTML input DOM element add readonly to 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 nice thing about this solution is that you can dynamically turn it on and of in a function so it can be integrated in for example D3 at creation time  not possible with the single  readonly  attribute    to remove the element from class   document getElementById  MyID   className     document getElementById  MyID   className replace   breadonly b         or use Jquery       div    removeClass   readonly      or toggle the class       div    toggleClass   readonly   addOrRemove      Just to be complete  good luck

[javascript] How to prevent user from typing in text field without disabling the field?

But If you want it to be truly constant and unchangeable:

Examples related to javascript

Examples related to jquery

Examples related to html