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

24 May, 2019
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.
<!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>                    
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 .
<!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>                    
Output:
Before click on the button:
After click on the button:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?