JQuery | Detect a textbox content is changed or not - GeeksforGeeks

Skip to content

Tutorials
- Practice DS & Algo.
- Algorithms
- Data Structures
- Interview Corner
- Languages
  - C
  - C++
  - Java
  - Python
  - C#
  - JavaScript
  - jQuery
  - SQL
  - PHP
  - Scala
  - Perl
  - Go Language
  - HTML
  - CSS
  - Kotlin
- CS Subjects
- GATE
- Web Technologies
- Software Designs
  - Software Design Patterns
  - System Design Tutorial
- School Learning
  - School Programming
  - Mathematics
  - Maths Notes (Class 8-12)
  - NCERT Solutions
  - RD Sharma Solutions
  - Physics Notes (Class 8-11)
- ISRO CS
- UGC NET CS
Student
Jobs
- Apply for Jobs
- Post a Job
Courses

Write
Come write articles for us and get featured
Practice
Learn and code with the best industry experts
Premium
Get access to ad-free content, doubt assistance and more!
Jobs
Come and find your dream job with us

Related Articles

HTML | autocomplete Attribute</a></li><li><a href="https://www.geeksforgeeks.org/html-dom-textarea-autocomplete-property/?ref=lbp">HTML | DOM Textarea autocomplete Property</a></li><li><a href="https://www.geeksforgeeks.org/how-to-put-an-input-element-on-the-same-line-as-its-label/?ref=lbp">How to put an input element on the same line as its label?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-move-button-in-the-same-line-with-checkbox-and-textbox-using-javascript/?ref=lbp">How to move button in the same line with Checkbox and Textbox using JavaScript ?</a></li><li class="currentpage" style="background-color: var(--color-gfg)"><b><a href="https://www.geeksforgeeks.org/jquery-detect-a-textbox-content-is-changed-or-not/?ref=lbp">JQuery | Detect a textbox content is changed or not</a></b></li><li><a href="https://www.geeksforgeeks.org/jquery-find-with-examples/?ref=lbp">jQuery | find() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-children-with-examples/?ref=lbp">jQuery | children() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-first-child-selector/?ref=lbp">jQuery | :first-child Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-first-of-type-selector/?ref=lbp">jQuery | :first-of-type Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-last-child-selector/?ref=lbp">jQuery | :last-child Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-bind-with-examples/?ref=lbp">jQuery | bind() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-blur-with-examples/?ref=lbp">jQuery | blur() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-change-with-examples/?ref=lbp">jQuery | change() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/how-to-get-parameters-from-a-url-string-in-php/?ref=lbp">How to get parameters from a URL string in PHP?</a></li><li><a href="https://www.geeksforgeeks.org/get-the-full-url-in-php/?ref=lbp">Get the full URL in PHP</a></li><li><a href="https://www.geeksforgeeks.org/php-parse_url-function/?ref=lbp">PHP | parse_url() Function</a></li><li><a href="https://www.geeksforgeeks.org/php-parse_str-function/?ref=lbp">PHP | parse_str() Function</a></li><li><a href="https://www.geeksforgeeks.org/php-strval-function/?ref=lbp">PHP | strval() Function</a></li><li><a href="https://www.geeksforgeeks.org/how-to-convert-a-string-into-number-in-php/?ref=lbp">How to convert a string into number in PHP?</a></li><li><a href="https://www.geeksforgeeks.org/php-number_format-function/?ref=lbp">PHP | number_format() Function</a></li><li><a href="https://www.geeksforgeeks.org/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript/?ref=lbp">How to get current formatted date dd/mm/yyyy in JavaScript ?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-set-input-type-date-in-dd-mm-yyyy-format-using-html/?ref=lbp">How to set input type date in dd-mm-yyyy format using HTML ?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-set-placeholder-value-for-input-type-date-in-html-5/?ref=lbp">How to set placeholder value for input type date in HTML 5 ?</a></li><li><a href="https://www.geeksforgeeks.org/change-an-html5-input-placeholder-color-with-css/?ref=lbp">Change an HTML5 input placeholder color with CSS</a></li><li><a href="https://www.geeksforgeeks.org/how-to-change-the-placeholder-text-using-jquery/?ref=lbp">How to change the placeholder text using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/jquery-set-the-value-of-an-input-text-field/?ref=leftbar-rightbar' >JQuery | Set the value of an input text field</a></li><li><a href='https://www.geeksforgeeks.org/how-to-add-options-to-a-select-element-using-jquery/?ref=leftbar-rightbar' >How to add options to a select element using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-change-the-background-color-after-clicking-the-button-in-javascript/?ref=leftbar-rightbar' >How to change the background color after clicking the button in JavaScript ?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-change-selected-value-of-a-drop-down-list-using-jquery/?ref=leftbar-rightbar' >How to change selected value of a drop-down list using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-fetch-data-from-json-file-and-display-in-html-table-using-jquery/?ref=leftbar-rightbar' >How to fetch data from JSON file and display in HTML table using jQuery ?</a></li></ul> </div> </div> <div class="container-fluid bg-light" id="home-page" style="position: relative; max-width:100%;"> <div class="article-page_flex"> <div class="sideBar"> <div class="sideBar--wrap"> <div class="article-page_sidebar-head"> <h2>Table of Contents</h2> </div> <ul class="leftBarList"><li><a href="https://www.geeksforgeeks.org/html-textarea-autocomplete-attribute/?ref=lbp">HTML | <textarea> autocomplete Attribute</a></li><li><a href="https://www.geeksforgeeks.org/html-dom-textarea-autocomplete-property/?ref=lbp">HTML | DOM Textarea autocomplete Property</a></li><li><a href="https://www.geeksforgeeks.org/how-to-put-an-input-element-on-the-same-line-as-its-label/?ref=lbp">How to put an input element on the same line as its label?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-move-button-in-the-same-line-with-checkbox-and-textbox-using-javascript/?ref=lbp">How to move button in the same line with Checkbox and Textbox using JavaScript ?</a></li><li class="currentpage" style="background-color: var(--color-gfg)"><b><a href="https://www.geeksforgeeks.org/jquery-detect-a-textbox-content-is-changed-or-not/?ref=lbp">JQuery | Detect a textbox content is changed or not</a></b></li><li><a href="https://www.geeksforgeeks.org/jquery-find-with-examples/?ref=lbp">jQuery | find() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-children-with-examples/?ref=lbp">jQuery | children() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-first-child-selector/?ref=lbp">jQuery | :first-child Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-first-of-type-selector/?ref=lbp">jQuery | :first-of-type Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-last-child-selector/?ref=lbp">jQuery | :last-child Selector</a></li><li><a href="https://www.geeksforgeeks.org/jquery-bind-with-examples/?ref=lbp">jQuery | bind() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-blur-with-examples/?ref=lbp">jQuery | blur() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/jquery-change-with-examples/?ref=lbp">jQuery | change() with Examples</a></li><li><a href="https://www.geeksforgeeks.org/how-to-get-parameters-from-a-url-string-in-php/?ref=lbp">How to get parameters from a URL string in PHP?</a></li><li><a href="https://www.geeksforgeeks.org/get-the-full-url-in-php/?ref=lbp">Get the full URL in PHP</a></li><li><a href="https://www.geeksforgeeks.org/php-parse_url-function/?ref=lbp">PHP | parse_url() Function</a></li><li><a href="https://www.geeksforgeeks.org/php-parse_str-function/?ref=lbp">PHP | parse_str() Function</a></li><li><a href="https://www.geeksforgeeks.org/php-strval-function/?ref=lbp">PHP | strval() Function</a></li><li><a href="https://www.geeksforgeeks.org/how-to-convert-a-string-into-number-in-php/?ref=lbp">How to convert a string into number in PHP?</a></li><li><a href="https://www.geeksforgeeks.org/php-number_format-function/?ref=lbp">PHP | number_format() Function</a></li><li><a href="https://www.geeksforgeeks.org/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript/?ref=lbp">How to get current formatted date dd/mm/yyyy in JavaScript ?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-set-input-type-date-in-dd-mm-yyyy-format-using-html/?ref=lbp">How to set input type date in dd-mm-yyyy format using HTML ?</a></li><li><a href="https://www.geeksforgeeks.org/how-to-set-placeholder-value-for-input-type-date-in-html-5/?ref=lbp">How to set placeholder value for input type date in HTML 5 ?</a></li><li><a href="https://www.geeksforgeeks.org/change-an-html5-input-placeholder-color-with-css/?ref=lbp">Change an HTML5 input placeholder color with CSS</a></li><li><a href="https://www.geeksforgeeks.org/how-to-change-the-placeholder-text-using-jquery/?ref=lbp">How to change the placeholder text using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/jquery-set-the-value-of-an-input-text-field/?ref=leftbar-rightbar' >JQuery | Set the value of an input text field</a></li><li><a href='https://www.geeksforgeeks.org/how-to-add-options-to-a-select-element-using-jquery/?ref=leftbar-rightbar' >How to add options to a select element using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-change-the-background-color-after-clicking-the-button-in-javascript/?ref=leftbar-rightbar' >How to change the background color after clicking the button in JavaScript ?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-change-selected-value-of-a-drop-down-list-using-jquery/?ref=leftbar-rightbar' >How to change selected value of a drop-down list using jQuery?</a></li><li><a href='https://www.geeksforgeeks.org/how-to-fetch-data-from-json-file-and-display-in-html-table-using-jquery/?ref=leftbar-rightbar' >How to fetch data from JSON file and display in HTML table using jQuery ?</a></li></ul> </div> </div> <div class="leftBar"> <div class="article--viewer"> <div class="article--viewer_content"> <div class="a-wrapper"> <div class="" style="z-index:9999 !important;position:relative;"> </div> <div pid="301904" ptitle="JQuery | Detect a textbox content is changed or not" class="article--viewer_improve tooltip"> <span class="tooltiptext">Improve Article</span> <button onclick="improveArticleCall()"> <i class="gfg-icon gfg-icon_edit"></i> </button> </div> <div pid="301904" class="article--viewer_bookmark tooltip"> <span class="tooltiptext">Save Article</span> <button data-gfg-action="bookmark-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_bookmark"></i> </button> </div> <div pid="301904" class="article--viewer_like tooltip"> <span class="tooltiptext">Like Article</span> <button data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> </button> </div> <article class="content post-301904 post type-post status-publish format-standard hentry category-jquery category-web-technologies tag-jquery-misc" id="post-301904">  <h1>JQuery | Detect a textbox content is changed or not</h1> <div class="media">  <div class="meta"> <ul>  <li> <span class="strong">Last Updated : </span> <span>20 May, 2019</span> </li> </ul> </div> </div> <div class="text"> <p>In order to detect the text content of input is changed or not, We are using the <strong>.on()</strong> method of JQuery.<br /> <strong>.on()</strong><br /> This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements. </p> <p><strong>Syntax:</strong></p> <pre> $(selector).on(event, childSel, data, fun, map) </pre> <p><strong>parameters:</strong></p> <ul> <li><strong>event:</strong> 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.</li> <li><strong>childSel:</strong> This parameter is optional. It defines that the event handler should only be attached to the defined child elements.</li> <li><strong>data:</strong> This parameter is optional. It specifies the additional data to pass to the function.</li> <li><strong>fun:</strong> This parameter is optional. It specifies the function to run on event occur.</li> <li><strong>map:</strong> This parameter specifies an event map ({event: function, event: function, …}) containing one or more event and functions to run when the events occur</li> </ul> <p><strong>Example-1:</strong> In this example, alert box appears saying that <strong>‘Text content changed!’</strong> when the text of the input changed.</p> <div class="code-block"> <div class="code-gutter"> <div class="editor-buttons-container"> <div class="editor-buttons"> <div class="editor-buttons-div" title="Run and Edit"> <i id="copy-code-button" title="Copy Code" class="gfg-icon gfg-icon_copy code-sidebar-button padding-2px copy-code-button"></i></p> <div id = "run-and-edit-loader" class="ring-load"></div> <p> <i id="run-and-edit-button" title="Edit Code" lang="xml" class="gfg-icon gfg-icon_edit_1 padding-2px code-sidebar-button"></i><br /> <i id="close-code-editor-button" title="Close Editor" class="gfg-icon gfg-icon_close-editor padding-2px code-sidebar-button close-code-editor-button"></i></p> <div id = "run-code-loader" class="ring-load"></div> <p> <i id="run-code-button" lang="xml" title="Run Code and See Output" class="gfg-icon gfg-icon_play padding-2px code-sidebar-button"></i></p> <div id = "generate-url-loader" class="ring-load"></div> <p> <i id="generate-url-and-run-button" title="Run Code and Generate IDE URL" lang="xml" class="gfg-icon gfg-icon_link padding-2px code-sidebar-button generate-url-and-run-button"></i><br /> <i title="Dark Mode" class="gfg-icon gfg-icon_dark-toggle padding-2px code-sidebar-button dark-editor-button"></i><br /> <i id = "edit-on-ide-button" title="Edit on IDE" lang="xml" class="gfg-icon gfg-icon_code padding-2px code-sidebar-button edit-on-ide-button"></i> </div> </p></div> </p></div> </p></div> <div class= "code-container"> <div id="highlighter_639317" class="syntaxhighlighter nogutter "> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="plain"><!DOCTYPE html> </code></div> <div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code><code class="plain">> </code></div> <div class="line number3 index2 alt2"><code class="undefined spaces"> </code> </div> <div class="line number4 index3 alt1"><code class="plain"><</code><code class="keyword">head</code><code class="plain">> </code></div> <div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">> </code></div> <div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">JQuery | </code></div> <div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain">detect a textbox's content has changed. </code></div> <div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">title</code><code class="plain">> </code></div> <div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">= </code></div> <div class="line number10 index9 alt1"><code class="string">"<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js</a>"</code><code class="plain">> </code></div> <div class="line number11 index10 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number12 index11 alt1"><code class="undefined spaces"> </code> </div> <div class="line number13 index12 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">> </code></div> <div class="line number14 index13 alt1"><code class="undefined spaces"> </code> </div> <div class="line number15 index14 alt2"><code class="plain"><</code><code class="keyword">body</code> <code class="color1">style</code><code class="plain">=</code><code class="string">"text-align:center;"</code> </div> <div class="line number16 index15 alt1"><code class="undefined spaces"> </code><code class="color1">id</code><code class="plain">=</code><code class="string">"body"</code><code class="plain">> </code></div> <div class="line number17 index16 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h1</code> <code class="color1">style</code><code class="plain">=</code><code class="string">"color:green;"</code><code class="plain">> </code></div> <div class="line number18 index17 alt1"><code class="undefined spaces"> </code><code class="plain">GeeksForGeeks </code></div> <div class="line number19 index18 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">h1</code><code class="plain">> </code></div> <div class="line number20 index19 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">> </code></div> <div class="line number21 index20 alt2"><code class="undefined spaces"> </code><code class="plain">Change the text of input text and </code></div> <div class="line number22 index21 alt1"><code class="undefined spaces"> </code><code class="plain">click outside of it to see. </code></div> <div class="line number23 index22 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">p</code><code class="plain">> </code></div> <div class="line number24 index23 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">input</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"input"</code></div> <div class="line number25 index24 alt2"><code class="undefined spaces"> </code><code class="color1">name</code><code class="plain">=</code><code class="string">"input"</code><code class="plain">/> </code></div> <div class="line number26 index25 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">> </code></div> <div class="line number27 index26 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">> </code></div> <div class="line number28 index27 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number29 index28 alt2 highlighted"><code class="undefined spaces"> </code><code class="plain">$("#input").on("change", function() { </code></div> <div class="line number30 index29 alt1 highlighted"><code class="undefined spaces"> </code><code class="plain">alert('Text content changed!'); </code></div> <div class="line number31 index30 alt2"><code class="undefined spaces"> </code><code class="plain">}); </code></div> <div class="line number32 index31 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number33 index32 alt2"><code class="plain"></</code><code class="keyword">body</code><code class="plain">> </code></div> <div class="line number34 index33 alt1"><code class="undefined spaces"> </code> </div> <div class="line number35 index34 alt2"><code class="plain"></</code><code class="keyword">html</code><code class="plain">> </code></div> </div> </td> </tr> </tbody> </table> </div></div> <div class="code-editor-container"></div> </p></div> <div class="code-output-container"> <div class = "output-block"> <i id="output-icon" title="Output" class="gfg-icon gfg-icon_arrow-right-editor padding-2px code-sidebar-button output-icon"></i></p> <pre class="output-pre"></pre> </p></div> <div class = "ide-link-div"> <i id="copy-url-button" title="Copy Generated Ide URL" class="gfg-icon gfg-icon_copy padding-2px code-sidebar-button copy-url-button"></i></p> <pre id="ide-url"></pre> </p></div> </p></div> <p><strong>Output:</strong><br /> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190508141906/jsct1a1.png" alt="" /></p> <ul> <li> <strong>After clicking outside of the input box:</strong><br /> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190508141102/jsct1b.png" alt="" /> </li> </ul> <p><strong>Example-2:</strong> In this example, alert box appears saying that <strong>‘Text content changed!’</strong> when either of activity happens.</p> <ul> <li>text of the input changed.</li> <li>keyup event happens.</li> <li>Something is pasted to the input box.</li> <li>propertychange occurs.</li> </ul> <div class="code-block"> <div class="code-gutter"> <div class="editor-buttons-container"> <div class="editor-buttons"> <div class="editor-buttons-div" title="Run and Edit"> <i id="copy-code-button" title="Copy Code" class="gfg-icon gfg-icon_copy code-sidebar-button padding-2px copy-code-button"></i></p> <div id = "run-and-edit-loader" class="ring-load"></div> <p> <i id="run-and-edit-button" title="Edit Code" lang="xml" class="gfg-icon gfg-icon_edit_1 padding-2px code-sidebar-button"></i><br /> <i id="close-code-editor-button" title="Close Editor" class="gfg-icon gfg-icon_close-editor padding-2px code-sidebar-button close-code-editor-button"></i></p> <div id = "run-code-loader" class="ring-load"></div> <p> <i id="run-code-button" lang="xml" title="Run Code and See Output" class="gfg-icon gfg-icon_play padding-2px code-sidebar-button"></i></p> <div id = "generate-url-loader" class="ring-load"></div> <p> <i id="generate-url-and-run-button" title="Run Code and Generate IDE URL" lang="xml" class="gfg-icon gfg-icon_link padding-2px code-sidebar-button generate-url-and-run-button"></i><br /> <i title="Dark Mode" class="gfg-icon gfg-icon_dark-toggle padding-2px code-sidebar-button dark-editor-button"></i><br /> <i id = "edit-on-ide-button" title="Edit on IDE" lang="xml" class="gfg-icon gfg-icon_code padding-2px code-sidebar-button edit-on-ide-button"></i> </div> </p></div> </p></div> </p></div> <div class= "code-container"> <div id="highlighter_438389" class="syntaxhighlighter nogutter "> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="plain"><!DOCTYPE html> </code></div> <div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code><code class="plain">> </code></div> <div class="line number3 index2 alt2"><code class="undefined spaces"> </code> </div> <div class="line number4 index3 alt1"><code class="plain"><</code><code class="keyword">head</code><code class="plain">> </code></div> <div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">> </code></div> <div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">JQuery | </code></div> <div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain">detect a textbox's content has changed. </code></div> <div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">title</code><code class="plain">> </code></div> <div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">= </code></div> <div class="line number10 index9 alt1"><code class="string">"<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js</a>"</code><code class="plain">> </code></div> <div class="line number11 index10 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number12 index11 alt1"><code class="undefined spaces"> </code> </div> <div class="line number13 index12 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">> </code></div> <div class="line number14 index13 alt1"><code class="undefined spaces"> </code> </div> <div class="line number15 index14 alt2"><code class="plain"><</code><code class="keyword">body</code> <code class="color1">style</code><code class="plain">=</code><code class="string">"text-align:center;"</code> </div> <div class="line number16 index15 alt1"><code class="undefined spaces"> </code><code class="color1">id</code><code class="plain">=</code><code class="string">"body"</code><code class="plain">> </code></div> <div class="line number17 index16 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h1</code> <code class="color1">style</code><code class="plain">=</code><code class="string">"color:green;"</code><code class="plain">> </code></div> <div class="line number18 index17 alt1"><code class="undefined spaces"> </code><code class="plain">GeeksForGeeks </code></div> <div class="line number19 index18 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">h1</code><code class="plain">> </code></div> <div class="line number20 index19 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">> </code></div> <div class="line number21 index20 alt2"><code class="undefined spaces"> </code><code class="plain">Change the text of input text </code></div> <div class="line number22 index21 alt1"><code class="undefined spaces"> </code><code class="plain">and click outside of it to see. </code></div> <div class="line number23 index22 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">p</code><code class="plain">> </code></div> <div class="line number24 index23 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">input</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"input"</code> </div> <div class="line number25 index24 alt2"><code class="undefined spaces"> </code><code class="color1">name</code><code class="plain">=</code><code class="string">"input"</code> <code class="plain">/> </code></div> <div class="line number26 index25 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">> </code></div> <div class="line number27 index26 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">> </code></div> <div class="line number28 index27 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number29 index28 alt2 highlighted"><code class="undefined spaces"> </code><code class="plain">$("#input").on( </code></div> <div class="line number30 index29 alt1 highlighted"><code class="undefined spaces"> </code><code class="plain">"propertychange change keyup paste input", function() { </code></div> <div class="line number31 index30 alt2 highlighted"><code class="undefined spaces"> </code><code class="plain">alert('Text content changed!'); </code></div> <div class="line number32 index31 alt1"><code class="undefined spaces"> </code><code class="plain">}); </code></div> <div class="line number33 index32 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">script</code><code class="plain">> </code></div> <div class="line number34 index33 alt1"><code class="plain"></</code><code class="keyword">body</code><code class="plain">> </code></div> <div class="line number35 index34 alt2"><code class="undefined spaces"> </code> </div> <div class="line number36 index35 alt1"><code class="plain"></</code><code class="keyword">html</code><code class="plain">> </code></div> </div> </td> </tr> </tbody> </table> </div></div> <div class="code-editor-container"></div> </p></div> <div class="code-output-container"> <div class = "output-block"> <i id="output-icon" title="Output" class="gfg-icon gfg-icon_arrow-right-editor padding-2px code-sidebar-button output-icon"></i></p> <pre class="output-pre"></pre> </p></div> <div class = "ide-link-div"> <i id="copy-url-button" title="Copy Generated Ide URL" class="gfg-icon gfg-icon_copy padding-2px code-sidebar-button copy-url-button"></i></p> <pre id="ide-url"></pre> </p></div> </p></div> <p><strong>Output:</strong><br /> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190508141908/jsct2a.png" alt="" /></p> <ul> <li> <strong>After event occurs:</strong><br /> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190508141102/jsct1b.png" alt="" /> </li> </ul> <div class="textBasedMannualAds_2"><p><a title="Bi-Wizard Coding Contest" href="https://practice.geeksforgeeks.org/contest/step-up-bi-wizard/?utm_source=banner&utm_medium=in-article&utm_campaign=in-article" target="_blank" rel="noopener"><img class="ad_course_banner" src="https://media.geeksforgeeks.org/wp-content/post-ads-banner/2022-01-19-13-33-07-Bi-Wizard-Coding-Contest-(-1200x.png" alt="" /></a></p></div><br/><div id="AP_G4GR_6"></div><div id="personalNoteDiv" class="clear hideIt"> <div class="personalNoteHeader clear"> <span class="noteHeaderText">My Personal Notes</span> <span class="hideNotesDivIcon"><i class="material-icons personalNotesIcon">arrow_drop_up</i></span> </div> <div class="collapsableDivPersonalNotes"> <textarea maxlength="5000" id="enteredPersonalNote" class="personalNoteStyle" placeholder="Add your personal notes here! (max 5000 chars)" >

How to move button in the same line with Checkbox and Textbox using JavaScript ?

jQuery | find() with Examples

Recommended Articles

Page :

How to detect If textbox content has changed using JavaScript ?

How to detect and change the content/style of a div using jQuery ?

How to check whether the enter key is pressed in a textbox or not using JavaScript / jQuery ?

How to fire event if CSS class is changed using jQuery ?

How to get value of textbox in jQuery ?

EasyUI jQuery textbox Widget

Projecting Content into Components with ng-content

Detect a device is iOS or not using JavaScript

How to detect flash is installed or not using JavaScript ?

How to detect HTML 5 <canvas> is not supported by JavaScript ?

How to detect the Internet connection is offline or not using JavaScript?

How to detect caps lock key turned on or not ?

How to detect HTML 5 is supported or not in the browser ?

How to detect a mobile device in jQuery?

How to detect escape key press using jQuery?

How to detect the user's device using jQuery ?

How to detect value change on hidden input field in JQuery ?

How to Display Changed Browser URL Without Reloading Through alert using JavaScript ?

p5.js | changed() Function

How to change dropdown menu when time is changed ?

How to refresh entire application when date is changed in angular 9 ?

Fabric.js Textbox opacity Property

Fabric.js Textbox originX Property

How to trigger HTML button after hitting enter button in textbox using JavaScript ?

Article Contributed By :

PranchalKatiyar

@PranchalKatiyar

Vote for difficulty

Article Tags :

Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.

Start Your Coding Journey Now!