How to disable an input type text

Question

I want to disable writing in an input field of type text using JavaScript  if possible  The input field is populated from a database  that is why I don t want the user to modify its value

User · Answer

Get a reference to your input box however you like (eg document.getElementById('mytextbox')) and set its readonly property to true:

myInputBox.readonly = true;

Alternatively you can simply add this property inline (no JavaScript needed):

<input type="text" value="from db" readonly="readonly" />

User · Answer

You can get the DOM element and set disabled attribute to true false  If you use vue framework here is a very easy demo   x000D   x000D    let vm   new Vue           el    app           data                 return   flag  true                      computed                btnText                     return this flag    Enable     Disable                                  x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt    lt div id  app  gt       lt input type  text  value  something   disabled  flag    gt       lt input type  button   value  btnText   click  flag  flag  gt   lt  div gt  x000D   x000D   x000D

User · Answer

If the data is populated from the database  you might consider not using an  lt input gt  tag to display it  Nevertheless  you can disable it right in the tag    lt input type  text  value    magic database value   disabled gt    If you need to disable it with Javascript later  you can set the  disabled  attribute   document getElementById  theInput   disabled   true    The reason I suggest not showing the value as an  lt input gt  is that  in my experience  it causes layout issues  If the text is long  then in an  lt input gt  the user will need to try and scroll the text  which is not something normal people would guess to do  If you just drop it into a  lt span gt  or something  you have more styling flexibility

User · Answer

If you know this when the page is rendered  which it sounds like you do because the database has a value  it s better to disable it when rendered instead of JavaScript   To do that  just add the readonly attribute  or disabled  if you want to remove it from the form submission as well  to the  lt input gt   like this    lt input type  text  disabled  disabled    gt    or     lt input type  text  readonly  readonly    gt

User · Answer

You can also by jquery       foo   0  disabled   true    Working example    x000D   x000D      foo   0  disabled   true  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input id  foo  placeholder  placeholder  value  value    gt  x000D   x000D   x000D

User · Answer

document getElementById  foo   disabled   true    or  document getElementById  foo   readOnly   true    Note that readOnly should be in camelCase to work correctly in Firefox  magic    Demo  https   jsfiddle net L96svw3c  -- somewhat explains the difference between disabled and readOnly

[javascript] How to disable an input type=text?

Examples related to javascript

Examples related to html