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 = </ 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 = </ 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:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.