How to add readonly attribute to an input tag in JavaScript ?

Use setAttribute() Method to add the readonly attribute to the form input field using JavaScript.

setAttribute() Method: This method adds the defined attribute to an element, and gives it the defined value. If the specified attribute already present, then the value is being set or changed.

Syntax:



element.setAttribute( attributeName, attributeValue )

Parameters:

  • attributeName: It is required parameter. It specifies the name of the attribute to be added.
  • attributeValue: It is required parameter. It specifies the value of the attribute to be added.

Example 1: In this example the read-only attribute of form input text field is enabled by accessing the property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Add a readonly attribute to an input tag
        </title>
    </head
  
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p style = "font-size: 15px; font-weight: bold;">
            The readonly attribute is added to input
            box on click on the button.
        </p>
          
        <form>
            Input : <input id = "Input" type="text"
                name="input_field" />
        </form>
        <br>
          
        <button onclick = "GFG_Run()">
            click here
        </button>
          
        <p id = "GFG_down" style
            "color: green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function GFG_Run() {
                document.getElementById('Input').readOnly
                        = true;
                  
                document.getElementById("GFG_down").innerHTML
                        = "Read-Only attribute enabled";
            }
        </script
    </body
</html>                    

chevron_right


Output:

  • Before click on the button:
  • After click on the button:

Example 2: In this example the read-only attribute of form input text field is enabled by using setAttribute() method .

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title>
            Add a readonly attribute to an input tag
        </title>
    </head
  
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p style = "font-size: 15px; font-weight: bold;">
            The readonly attribute is added to input box
            on click on the button.
        </p>
          
        <form>
            Input : <input id = "Input" type="text"
                    name="input_field" />
        </form>
        <br>
          
        <button onclick = "GFG_Run()">
            click here
        </button>
          
        <p id = "GFG_down" style
            "color: green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function GFG_Run() {
                document.getElementById('Input').setAttribute('readonly', true);
                  
                document.getElementById("GFG_down").innerHTML
                        = "Read-Only attribute enabled";
            }
        </script
    </body
</html>                    

chevron_right


Output:

  • Before click on the button:
  • After click on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.