JQuery | Detect a textbox content is changed or not

Last Updated : 20 May, 2019

In order to detect the text content of input is changed or not, We are using the .on() method of JQuery.
.on()
This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements.

Syntax:

$(selector).on(event, childSel, data, fun, map)

parameters:

event: This parameter is required. It defines events or namespaces to attach to elements selected. If multiple events are to be provided, must be separated by space.
childSel: This parameter is optional. It defines that the event handler should only be attached to the defined child elements.
data: This parameter is optional. It specifies the additional data to pass to the function.
fun: This parameter is optional. It specifies the function to run on event occur.
map: This parameter specifies an event map ({event: function, event: function, …}) containing one or more event and functions to run when the events occur

Example-1: In this example, alert box appears saying that ‘Text content changed!’ when the text of the input changed.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery | 
      detect a textbox's content has changed.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
  
</head>
  
<body style="text-align:center;" 
      id="body">
    <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"/>
    <br>
    <br>
    <script>
        $("#input").on("change", function() {
            alert('Text content changed!');
        });
    </script>
</body>
  
</html>

Output:

After clicking outside of the input box:

Example-2: In this example, alert box appears saying that ‘Text content changed!’ when either of activity happens.

text of the input changed.
keyup event happens.
Something is pasted to the input box.
propertychange occurs.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery |
      detect a textbox's content has changed.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
  
</head>
  
<body style="text-align:center;" 
      id="body">
    <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" />
    <br>
    <br>
    <script>
        $("#input").on(
          "propertychange change keyup paste input", function() {
            alert('Text content changed!');
        });
    </script>
</body>
  
</html>

Output:

After event occurs:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles