Skip to content
Related Articles

Related Articles

How to make a text input non-editable using jQuery ?
  • Last Updated : 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=
        </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=
        </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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :