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.

Answer 1

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.

Answer 2

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