How to detect If textbox content has changed using JavaScript ?

The task is to detect the changes in the textbox content with JavaScript. There are two approaches that are discussed below.

Approach 1: We will use the onchange event in the input element and call a function to see the effect.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Detect If Textbox content has
            changed using pure JavaScript
        </title>
    </head>
      
    <body style="text-align:center;">
        <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"
               onchange="GFG_Fun()" />
        <br>
        <br>
        <script>
            function GFG_Fun() {
                alert('Changed');
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 2: There are few other events that can be used to detect the change in content of textbox. Use any or all of them onchange event, onpropertychange event, onkeyup event, onpaste event and oninput event in the input element and call a function to see the effect.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Detect If Textbox content has 
            changed using pure JavaScript
        </title>
    </head>
      
    <body style="text-align:center;">
        <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"
               onchange 
               onpropertychange 
               onkeyuponpaste oninput="GFG_Fun()" />
        <br>
        <br>
        <script>
            function GFG_Fun() {
                alert('Changed');
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.