Hi, in this article we will be talking about How to detect input value change in JQquery.
There are two diffrent ways to detect input value change in JQuery. You can trigger any function if element value change.
- Jquery .keypress() method
- Jquery .change() method
What is the diffrence between .change() and .keypress() ?
When you detect an element value change with .change() it triggers when element loses focus. But in .keypress() function you will detect every value changes because it fires everytime user presses any key.
First Example with .keypress() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery Example</title>
</head>
<body>
<b>Input with .keypress() method :</b> <input type="text" id="input1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#input1').keypress(function(){
alert('input value change');
});
});
</script>
</body>
</html>Second Example with .change() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery Example</title>
</head>
<body>
<b>Input with .change() method :</b> <input type="text" id="input1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#input1').change(function(){
alert('input value change');
});
});
</script>
</body>
</html>Summary
Both examples are very clear you can detect element value change easyly. But in the second example will fire input loses its focus so you will have the result end of the changing value.
First example is to detect input value change instantly.
Thank you!