JQuery | Detect a textbox content is changed or not
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;" > w3wiki </ 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;" > w3wiki </ 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: