Detect Text Change In Text Field - jQuery Textchange.js

The Textchange.js plugin provides a textchange event that will be fired every time the value in a text field is changed.

How to use it:

1. Load the jquery.textchange.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery.textchange.js"></script>

2. Attach an event handler function for the Textchange to the selected text field. The second timeout parameter is used to determine the time to wait before triggering the Textchange event if the user stops typing.

<input type="text" id="example" placeholder="Type something" autofocus />

$('input#example').on('textchange.namespace1', 500, function(e) {
  // do something
});

3. This example shows how to detect text change in an input value and print the current value in a result element.

<!-- Input -->
<input type="text" id="example" placeholder="Type something" autofocus />

<!-- Output -->
Result: <span id="example-result"></span>

$('input#example').on('textchange.namespace1', 100, function(e) {
  $('span#example-result').html($(this).val());
});

3. Remove the event handler.

$('input#example').off('textchange.namespace1');

---

This awesome jQuery plugin is developed by wraplr. For more Advanced Usages, please check the demo page or visit the official website.