Detect Text Change In Text Field - jQuery Textchange.js

Detect Text Change In Text Field - jQuery Textchange.js
File Size: 6.04 KB
Views Total: 88
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.