JQuery | Detect a textbox content is changed or not

20 May, 2019
In order to detect the text content of input is changed or not, We are using the .on() method of JQuery..on()This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements.
Syntax:
$(selector).on(event, childSel, data, fun, map)

parameters:
event: This parameter is required. It defines events or namespaces to attach to elements selected. If multiple events are to be provided, must be separated by space.
childSel: This parameter is optional. It defines that the event handler should only be attached to the defined child elements.
data: This parameter is optional. It specifies the additional data to pass to the function.
fun: This parameter is optional. It specifies the function to run on event occur.
map: This parameter specifies an event map ({event: function, event: function, ...}) containing one or more event and functions to run when the events occur
Example-1: In this example, alert box appears saying that ‘Text content changed!’ when the text of the input changed.
<!DOCTYPE html><html>  <head>    <title>        JQuery |       detect a textbox's content has changed.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script>  </head>  <body style="text-align:center;"       id="body">    <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"/>    <br>    <br>    <script>        $("#input").on("change", function() {            alert('Text content changed!');        });    </script></body>  </html>
Output:
After clicking outside of the input box:
Example-2: In this example, alert box appears saying that ‘Text content changed!’ when either of activity happens.
text of the input changed.
keyup event happens.
Something is pasted to the input box.
propertychange occurs.
<!DOCTYPE html><html>  <head>    <title>        JQuery |      detect a textbox's content has changed.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script>  </head>  <body style="text-align:center;"       id="body">    <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" />    <br>    <br>    <script>        $("#input").on(          "propertychange change keyup paste input", function() {            alert('Text content changed!');        });    </script></body>  </html>
Output:
After event occurs:
jQuery-Misc
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
Scroll to the top of the page using JavaScript/jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?