Question

I want to trigger an event handler once per each actual change in an input field. For example, to validate (per keypress) entry of a credit card number (the change must be on each change so debouncing/throttling is not the answer).

I cannot use input alone as IE9 will not trigger this event from backspaces or cut/delete.

I cannot use keyup alone as this does not handle changes from a mouse (eg. pasting).

I cannot use change because this only fires on blur.

I can do $('input').bind('input keyup', handler) but this will fire two separate events most of the time. Assume that the handler is expensive and running it twice is unacceptable.

I can wrap the handler so that it only runs if the current value is different to the last checked but is there a better way?

Answer 1

What you are doing with checking the last input is what you need to do.

This is one way you can do it to store the last value.

function handler(){ 
    var tb = jQuery(this);
    var currentValue = tb.val();
    if (tb.data("lastInput") !== currentValue) {
        tb.data("lastInput", currentValue);
        console.log("The current value is " + currentValue);
    } 
}
$('input').bind('input keyup', handler);

jsFiddle

You could always extend jQuery if you really do not want that logic in your function. It is a bunch more code, but one method.

(function(){
    $.fn.oneinput = function(callback) {        
        function testInput(){ 
            var tb = jQuery(this);
            var currentValue = tb.val();
            if (tb.data("lastInput") !== currentValue ) {
                tb.data("lastInput",currentValue );
                if(callback) { 
                    callback.call(this) 
                };
            }
            return this;
        }    
        jQuery(this).bind("keyup input", testInput);
    };
}(jQuery));

$('input').oneinput( function(){ console.log(this.value); });
​

jsfiddle