¿Cómo detectar si el contenido del cuadro de texto ha cambiado usando JavaScript?

La tarea es detectar los cambios en el contenido del cuadro de texto con JavaScript. Hay dos enfoques que se analizan a continuación.

Enfoque 1: Usaremos el evento onchange en el elemento de entrada y llamaremos a una función para ver el efecto.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Detect If Textbox content has
        changed using pure JavaScript
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1>
    <p>
      Change the text of input text
      and click outside of it to see.
    </p>
    <input id="input" name="input"
           onchange="GFG_Fun()" />
    <br>
    <br>
    <script>
        function GFG_Fun() {
            alert('Changed');
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: hay algunos otros eventos que se pueden usar para detectar el cambio en el contenido del cuadro de texto. Use cualquiera o todos ellos onchange event , onpropertychange event , onkeyup event , onpegar event y oninput event en el elemento de entrada y llame a una función para ver el efecto.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Detect If Textbox content has 
        changed using pure JavaScript
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
      GeeksforGeeks  
    </h1>
    <p> 
      Change the text of input text and
      click outside of it to see.
    </p>
    <input id="input" name="input"
           onchange 
           onpropertychange 
           onkeyuponpaste oninput="GFG_Fun()" />
    <br>
    <br>
    <script>
        function GFG_Fun() {
            alert('Changed');
        }
    </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