Open In App

HTML DOM Input Search readOnly Property

Improve
Improve
Like Article
Like
Save
Share
Report

The Input Search readOnly Property is used to set or return whether a search Field should be read-only or not. A read-only field can’t be changed but can be selected, copied, and tabbed. It reflects the HTML readonly attribute.

Syntax:

  • It is used to return the readOnly property
searchObject.readOnly
  • It is used to set the readOnly property.
searchObject.readOnly = true|false

Property Values:

Name

Description

true

It defines that search field is read only.

false

It is the default value. It defines that search field is not read only.

Return Value:

It returns a boolean value which represent the search field is read only or not. 

HTML DOM Input Search readOnly Property Examples

Example 1: In this example we creates a page with a search input field set to read-only. Clicking a button displays the read-only property status. 

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>
            Input Search readOnly Property
        </title>
    </head>

    <body>
        <h2>Input Search readOnly Property</h2>
        <form id="myGeeks">
            Search:
            <input
                type="search"
                id="test"
                placeholder="Type to search.."
            />
        </form>
        <br /><br />
        <button onclick="makeReadOnly()">
            Click here
        </button>
        <p
            id="check"
            style="font-size: 24px; color: green"
        ></p>
        <script>
            function makeReadOnly() {
                // Set the readonly property
                document.getElementById(
                    "test"
                ).readOnly = true;
                document.getElementById(
                    "check"
                ).innerHTML =
                    "Search field set to read-only.";
            }
        </script>
    </body>
</html>

Output: 

SearchReadonly2



Example 2: In this example search input field initially set to read-only. Upon double-clicking the button, it’s toggled to editable, updating a confirmation message.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>
            Input Search readOnly Property
        </title>
    </head>
    <body>
        <h2>Input Search readOnly Property</h2>
        <form id="myGeeks">
            <input
                type="Search"
                id="test"
                placeholder="Type to search.."
                readonly
            />
        </form>
        <br />
        <br />
        <button ondblclick="Access()">
            click here
        </button>
        <p
            id="check"
            style="font-size: 24px; color: green"
        ></p>
        <script>
            function Access() {
                // set Input search readOnly Property
                let s = (document.getElementById(
                    "test"
                ).readOnly = false);

                document.getElementById(
                    "check"
                ).innerHTML = s;
            }
        </script>
    </body>
</html>

Output: 

SearchReadonly

HTML DOM Input Search readOnly Property Example Output

Supported Browsers:

The browser supported by DOM input search readOnly Property are listed below:



Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads