In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > readOnly (input, textarea, ...)

readOnly property (input, textarea, ...)

Browser support:

Sets or retrieves whether the contents of the element are changeable.

If the state is read-only, the user cannot modify the contents of the element, but the element continues to get focus and be selectable. If you want to prevent the user from interacting with the object, use the disabled property.

Syntax:

object.readOnly;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: READONLY

Possible values:

Boolean that indicates whether the contents of the element can be changed.

One of the following values:

false

Default. Element content is writable.

true

Element content is read-only.

Default: false.

Example HTML code 1:

This example illustrates the use of the READONLY attribute:

<textarea rows="3" readonly="readonly">Change this text!</textarea>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the READONLY property:

<head>
    <script type="text/javascript">
        function ToggleReadOnlyState () {
            var textarea = document.getElementById ("myText");
            textarea.readOnly = !textarea.readOnly;
        }
    </script>
</head>
<body>
    <textarea id="myText" rows="3" readonly="readonly">Change this text!</textarea>

    <br />
    Click on the button to modify the editable state of the textarea element
    <br />
    <button onclick="ToggleReadOnlyState ();">Change read-only state!</button>
</body>