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: