Skip to content
Related Articles

Related Articles

Improve Article
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=
    </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=
    </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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :