157

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.

7 Answers 7

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

7
  • 4
    This worked for me. Jquery version is $('input').prop('disabled', true) Feb 2, 2015 at 10:18
  • I'm seven years late on this -- but is there any semantic difference between these two in 2017?
    – Jules
    Jan 30, 2017 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, 2017 at 8: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... Jun 27, 2019 at 15:14
  • WHATWG 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? Feb 10, 2021 at 19:33
193

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" />
5
  • 96
    I dont know why this gets votes, it doesnt answer the question. We were expecting javascript answers.
    – Sophie
    May 22, 2013 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. May 23, 2013 at 1:52
  • 8
    disabled mode prevents click events on the input box, readonly doesn't. fyi.
    – knutole
    Apr 23, 2014 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) Nov 11, 2014 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. Jul 18, 2016 at 21:50
25

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.

1
  • 4
    Bear in mind disabled can make text almost unreadable on some browsers. You might be better off with the readonly attribute, e.g. <input type="text" value="foo" readonly> May 20, 2010 at 14:42
10

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" />
1
  • If you're writing HTML (as opposed to XHTML) that'd be <input type="text" value="from db" readonly> May 20, 2010 at 14:43
8

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" />

1
  • 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 Oct 12, 2017 at 14:03
1

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>

0
// CSS Markup
        .disabled-input {
                     pointer-events: none;
                    }
// HTML
    <input class="disabled-input" />

If you are looking for a purely CSS approach you can disabled it by giving the following property to the class.

Not the answer you're looking for? Browse other questions tagged or ask your own question.