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.
Add a comment
|
8 Answers
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 Comments
Sunwoo Yang
This worked for me. Jquery version is $('input').prop('disabled', true)
Jules
I'm seven years late on this -- but is there any semantic difference between these two in 2017?
hudolejev
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.
Voldemort's Wrath
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...
Sebastian Simon
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? |
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 Comments
Sophie
I dont know why this gets votes, it doesnt answer the question. We were expecting javascript answers.
Nick Craver
@Sophie it's the most correct way for the asker to do it based on their situation, perhaps a title change is in order.
knutole
disabled mode prevents click events on the input box, readonly doesn't. fyi.
Jake Toronto
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)
Aaron Wallentine
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.
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 Comment
Olly Hodgson
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>
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 Comment
Olly Hodgson
If you're writing HTML (as opposed to XHTML) that'd be <input type="text" value="from db" readonly>
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 Comment
Arek Kostrzeba
@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
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>
Comments
// 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.
Comments
disabled and readOnly can useful for this.
Try to run this snippet to see the difference between disabled and readOnly.
document.getElementById('hello3').disabled = true;
document.getElementById('world3').readOnly = true;<input type="text" value="Hello 1">
<br>
<input type="text" value="Hello 2" disabled>
<br>
<input type="text" value="Hello 3" id="hello3">
<br>
<br>
<input type="text" value="World 1!">
<br>
<input type="text" value="World 2!" readonly>
<br>
<input type="text" value="World 3!" id="world3">