Detect all changes to an `` (immediately) using JQuery

Handling multiple text inputs

In a scenario where your form has several text inputs, jQuery's each() function can apply the monitoring pattern to all related elements.

$('input[type="text"]').each(function() {
    $(this).data('oldVal', $(this).val()); // Save old input for comparison
    
    $(this).on('input', function() {
        // Time to compare the plant's feelings!
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());
            // Execute your custom actions here.
        }
    });
});


The initial value is stored, and a comparison is made each time the input event triggers. If a change is detected, any custom code is then executed.

Extending change detection beyond input

While input event is widely supported by modern browsers, some older versions might not be compatible. To ensure backward compatibility, combine change, keyup, paste, and click events:

$('input[type="text"]').on('change keyup paste click', function() {
    // Adapt to changes depending upon the event. Amazing, huh?
});


Alternatively, introduce a setInterval for a time-controlled polling mechanism:

setInterval(function() {
    $('input[type="text"]').each(function() {
        // Wake up, time to compare your feelings with the older one!
        var newVal = $(this).val();
        if ($(this).data('oldVal') != newVal) {
            $(this).data('oldVal', newVal);
            // Time to show some reaction to the input change.
        }
    });
}, 100); // Check every 100ms, your performance might say thank you later!


Working with dynamic inputs(event delegation)

If your inputs are dynamically generated, input event can be attached to the document, but it will execute only when matched with specified input types:

$(document).on('input', 'input[type="text"]', function() {
    console.log('Old value changed to:', $(this).val());
});


Catching programmatic changes

If changes are made via JavaScript, catch them using .trigger('input').

function setValue(input, value) {
    // Setting value and triggering change event
    $(input).val(value).trigger('input');
}

setValue('#textInput', 'new value'); // Simulate input change programmatically. I know, pretty smooth!


Performance optimization and potential caveats

Be aware of the potential impact on performance due to frequent use of setInterval or multiple events. Implement debouncing to manage the rate at which handlers execute:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
}

var handleInput = debounce(function(e) {
    // Slow down buddy, we have debouncing in action!
    console.log('Value changed to:', $(e.target).val());
}, 250);

$('input[type="text"]').on('input', handleInput);
