Home »
jQuery »
jQuery Examples
Detecting Input Change in jQuery
In this tutorial, we'll see how to detect any input change in the input text box using jQuery?
Submitted by Pratishtha Saxena, on July 22, 2022
Detecting Input Change using jQuery .change() Method
This is a jQuery inbuilt method. It gets triggered as soon as any input text is changed in the specified input box in a webpage. This detects any changes in the input box. As this method is triggered, it also initiates the function attached to it (if any). The function here is optional.
Syntax:
$(selector).change( function());
This method of jQuery can be implemented for other elements also apart from only input box. It can be used to detect changes in the textarea tag also.
Let's understand this better with an example.
Here, we take an empty input filed and apply change method to it. As soon as we write anything in that field, the change method detects the changes there and triggers the function attached to it.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<center>
<h2>Detecting Input Change</h2>
<p>Write some text in the below given input box and then press enter. Check console window as soon as the enter key is pressed.</p>
<label>Enter Text:</label>
<input type="text" id="input">
</center>
</body>
</html>
jQuery:
<script>
$(document).ready(function(){
$("#input").change( function() {
console.log('Input value has been changed!');
});
});
</script>
Output:
