Open In App

How to detect If textbox content has changed using JavaScript ?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Detecting if the content of a textbox has changed in JavaScript means identifying when a user modifies the text within an input field. This can be achieved using events like input, change, or keyup, which trigger JavaScript functions in response to content alterations.

There are some common approaches that are discussed below:

Table of Content

Approach 1: Using onchange event

The onchange event in JavaScript triggers when the textbox loses focus after its content is modified. It doesn't fire immediately while typing but waits until the user finishes editing and clicks elsewhere, making it useful for detecting finalized changes in input fields.

Example: In this example, the onchange event on a textbox. When the user modifies the text and clicks outside the textbox, a JavaScript function triggers an alert with the message "Changed".

html 
<!DOCTYPE html>
<html>

<head>
    <title>
       Using onchange event
    </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>

Output:

Approach 2: Using onpropertychange event

The onpropertychange event in JavaScript is triggered when a property of an HTML element changes, specifically used in older versions of Internet Explorer (IE 8 and below). For textboxes, it detects changes in the value property, alerting when content is modified.

Example: In this example, we multiple events like onchange, onpropertychange, onkeyup, onpaste, and oninput on a textbox. Whenever the content changes, the JavaScript function triggers an alert displaying "Changed".

html 
<!DOCTYPE html>
<html>

<head>
    <title>
       Using onpropertychange event
    </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>

Output:

Approach 3: Using addEventListener() Method

The addEventListener() method attaches an event handler to an HTML element without overwriting existing events. For detecting textbox changes, you can use it to listen for events like input, change, or keyup, ensuring the callback function executes when content changes.

Example: In this example, we use addEventListener() to listen for the input event on a textbox. When the content of the textbox changes, an alert is triggered displaying the message "Changed!".

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Using addEventListener() method</title>
    <style>
        h1 {
            text-align: center;
        }

        .abc {
            display: flex;
            justify-content: center;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <div class="abc">
        <input id="gfg">
    </div>

    <script>
        document.getElementById("gfg")
            .addEventListener("input", (event) => alert("Changed!"));

    </script>
</body>

</html>

Output:

 


P
PranchalKatiyar
Improve
Article Tags :

Explore

Lightbox