Open In App

HTML | DOM Input Text readOnly Property

Last Updated : 26 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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>                    

Output: 
Before Clicking the Button: 


After Clicking the Button: 
 


Supported Browsers: The browser supported by DOM Input Text readOnly Property are listed below: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera
  • Safari 1


 


Next Article
Practice Tags :

Similar Reads