Categories : Javascript , JQuery

Hi, in this article we will be talking about How to detect on 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.

  1. Jquery .keypress() method ( while typing : on change )
  2. Jquery .change() method ( After changed and after element lose focus )

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 ( while typing – on change )

<!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!

If you want to know How to change ( set ) input value text you can check this article also.

One response to “JQuery How to Detect Input Value Change? – Trigger function after value on change or while typing”

  1. Gokhan says:

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *