¿Cómo hacer que una entrada de texto no sea editable usando jQuery?

Un documento HTML que contiene el área de texto de entrada y la tarea es hacer que la entrada de texto no sea editable con la ayuda de jQuery. Hay dos enfoques que se analizan a continuación:

Enfoque 1: vamos a establecer la propiedad readonly en true . Para establecer la propiedad de solo lectura, usaremos un método prop() .

Ejemplo:

<!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>

Producción:

Enfoque 2: vamos a establecer la propiedad readonly en true . En este ejemplo, usaremos el método attr() para establecer el valor de la propiedad.

Ejemplo:

<!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>

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta