HTML | DOM Input Text readOnly Property

The Input Text readOnly property in HTML DOM is used to set or return whether a text field should be read-only or not. It means that a user can not modify or changes the content already present in a particular element (However, a user can tab to it, highlight it, and copy the text from it) whereas a JavaScript can be used to change the read-only value and make the input field editable.

Syntax:

It returns the readOnly property.

textObject.readOnly

it is used to Set the readOnly property.

textObject.readOnly = true|false

Property Values: It accepts two value which are listed below:

true: It defines that the text field is read only.
false: It is the default value. It defines that the text field is not read only.

Return Value: It returns a boolean value which represent the text field is read only or not.

Example 1: This example illustrates how to return Input Text readOnly property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Text readOnly Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksForGeeks</h1>
 
    <h2>DOM Input Text readOnly Property</h2>
     
    <form id="myGeeks">
        <input type="text" id="text_id" readonly>
    </form><br>
     
    <button onclick="myGeeks()">Click Here!</button>
     
    <p id="GFG" style="font-size:25px;"></p>
 
  
     
    <!-- script to return the readOnly Property-->
    <script>
        function myGeeks() {
            var txt = document.getElementById("text_id").readOnly;
            document.getElementById("GFG").innerHTML = txt;
        }
    </script>
</body>
 
</html>                   

Output:
Before Clicking the Button:

After Clicking the Button:

Example 2: This example illustrates how to set Input Text readOnly property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Text readOnly Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksForGeeks</h1>
 
    <h2>DOM Input Text readOnly Property</h2>
     
    <form id="myGeeks">
        <input type="text" id="text_id" readonly>
    </form><br>
     
    <button onclick="myGeeks()">Click Here!</button>
     
    <p id="GFG" style="font-size:25px;"></p>
 
  
     
    <!-- script to set the readOnly Property-->
    <script>
        function myGeeks() {
            var txt = document.getElementById("text_id").readOnly
                    = false;
                     
            document.getElementById("GFG").innerHTML = txt;
        }
    </script>
</body>
 
</html>                   