JQuery | Detect a textbox content is changed or not

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery | 
      detect a textbox's content has changed.
    </title>
    <script src=
    </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>

chevron_right


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.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery |
      detect a textbox's content has changed.
    </title>
    <script src=
    </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>

chevron_right


Output:

  • After event occurs:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.