137

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.

TylerH
  • 19,065
  • 49
  • 65
  • 86
kawtousse
  • 3,422
  • 10
  • 33
  • 57

6 Answers6

225
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.

hudolejev
  • 5,356
  • 4
  • 20
  • 27
  • 4
    This worked for me. Jquery version is $('input').prop('disabled', true) – Daniel Sun Yang Feb 02 '15 at 10:18
  • I'm seven years late on this -- but is there any semantic difference between these two in 2017? – Jules Jan 30 '17 at 17:34
  • 2
    You're not late at all, the magic is still there (: I don't remember what platforms I tested on back then, but today `readonly` (lowercase) still doesn't work in Firefox 52 on Ubuntu -- should be camel case. – hudolejev Apr 13 '17 at 08:20
  • Why doesn't this work for me? I made an `input` element with `id="gate"` and I try your code, which doesn't seem to be working for me... – Voldemort's Wrath Jun 27 '19 at 15:14
  • [WHATWG](https://html.spec.whatwg.org/multipage/input.html#htmlinputelement) specifies the property as `readOnly`; both Chrome and Firefox only support `readOnly`. Was there ever a browser in which the property name was not in camelCase? – Sebastian Simon Feb 10 '21 at 19:33
  • @Voldemort'sWrath If your comment is still relevant: is your ` – Sebastian Simon Feb 10 '21 at 19:35
  • @SebastianSimon -- Thanks for the response, but it's not an issue anymore! :):) – Voldemort's Wrath Feb 12 '21 at 00:03
185

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 <input>, like this:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />
Matthew Lock
  • 11,495
  • 11
  • 84
  • 122
Nick Craver
  • 594,859
  • 130
  • 1,270
  • 1,139
  • 91
    I dont know why this gets votes, it doesnt answer the question. We were expecting javascript answers. – Sophie May 22 '13 at 21:31
  • 3
    @Sophie it's the most correct way for the asker to do it based on their situation, perhaps a title change is in order. – Nick Craver May 23 '13 at 01:52
  • 8
    disabled mode prevents click events on the input box, readonly doesn't. fyi. – knutole Apr 23 '14 at 20:00
  • 1
    To get the "readonly" input field to LOOK like the "disabled" field, set 'style="color: grey; background-color: #F0F0F0;"'. (this was a comment to [this answer](http://stackoverflow.com/a/4728005/1930619)) – Jake Toronto Nov 11 '14 at 20:57
  • 4
    Keep in mind that browsers are free to ignore the "disabled" or "readonly" attribute and this method shouldn't be relied on to reliably keep the data from being updated ... if the server-side code processing the form will still accept a value from that field and update it, anyone with enough savvy to create their own form can bypass this "disabling" ... this is for user interface convenience only in a trusted environment. The real way to prevent it is with server side logic. – Aaron Wallentine Jul 18 '16 at 21:50
22

If the data is populated from the database, you might consider not using an <input> tag to display it. Nevertheless, you can disable it right in the tag:

<input type='text' value='${magic.database.value}' disabled>

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 <input> is that, in my experience, it causes layout issues. If the text is long, then in an <input> 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 <span> or something, you have more styling flexibility.

Pointy
  • 371,531
  • 55
  • 528
  • 584
  • 3
    Bear in mind disabled can make text almost unreadable on some browsers. You might be better off with the readonly attribute, e.g. – Olly Hodgson May 20 '10 at 14:42
7

You can also by jquery:

$('#foo')[0].disabled = true;

Working example:

$('#foo')[0].disabled = true;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />
Syfer
  • 3,777
  • 2
  • 15
  • 30
Chani Poz
  • 1,223
  • 1
  • 20
  • 43
  • 1
    @Chani Poz You are calling native js setter on jquery object it will result with error. $('#foo')[0].disabled = true or $('#foo').get(0).disabled = true will do the work – Arek Kostrzeba Oct 12 '17 at 14:03
6

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" />
Roatin Marth
  • 21,331
  • 3
  • 46
  • 53
0

You can get the DOM element and set disabled attribute to true/false.

If you use vue framework,here is a very easy demo.

  let vm = new Vue({
        el: "#app",
        data() {
            return { flag: true }
        },
        computed: {
            btnText() {
                return this.flag ? "Enable" : "Disable";
            }
        }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <input type="text" value="something" :disabled="flag" />
    <input type="button" :value="btnText" @click="flag=!flag">
</div>
Q10Viking
  • 576
  • 6
  • 7