How to make a text input non-editable using jQuery ?

22 Apr, 2020
An HTML document containing the input text area and the task is to make the text input non-editable with the help of jQuery. There are two approaches that are discussed below:
Approach 1: We are going to set the property readonly to true. To set the readonly property, we will use a prop() method.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to make a text input        non-editable using JQuery?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      Type Here: <input id="input" />    <br><br>          <button onclick="GFG_Fun()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on the button to "                        + "perform the operation.";          function GFG_Fun() {            $("#input").prop("readonly", true);                          el_down.innerHTML =                 "Input element is now read-only";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to make a text input        non-editable using JQuery?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      Type Here: <input id="input" />    <br><br>          <button onclick="GFG_Fun()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on the button to "                        + "perform the operation.";          function GFG_Fun() {            $("#input").prop("readonly", true);                          el_down.innerHTML =                 "Input element is now read-only";        }    </script></body>  </html>
Output:
Approach 2: We are going to set the property readonly to true. In this example, we will use attr() method to set the property value.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to make a text input         non-editable using JQuery?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      Type Here: <input id="input" />    <br><br>          <button onclick="GFG_Fun()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on the button to "                        + "perform the operation.";          function GFG_Fun() {            $("#input").attr("readonly", true);            el_down.innerHTML =                 "Input element is now read-only";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to make a text input         non-editable using JQuery?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      Type Here: <input id="input" />    <br><br>          <button onclick="GFG_Fun()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on the button to "                        + "perform the operation.";          function GFG_Fun() {            $("#input").attr("readonly", true);            el_down.innerHTML =                 "Input element is now read-only";        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)