The readonly Attribute

Live Demo

Firefox	Safari	Safari	Chrome	Opera	IE	Android

The Low Down

The readonly attribute makes a form control non-editable (or “read only”).

• A read-only field can’t be modified, but, unlike disabled, you can tab into it, highlight it, and copy its contents.
• Setting the value to null does not remove the effects of the attribute. Instead use removeAttribute('readonly').
• You can target elements that are read only with the :read-only pseudo-class, and its writability with the :read-write pseudo-class. Or, if you want to specifically target the presence of the attribute, you can use input[readonly] and input:not([readonly]).
• readonly is only relevant for type text, search, url, tel, email, number, password, and the date/time input types. It is also valid on <textarea>
• readonly is ignored for type hidden, range, color, checkbox, radio, file, button, submit and image.