How to trigger an event in input text after I stop typing/writing?

The Solution to How to trigger an event in input text after I stop typing/writing? is


You'll have to use a setTimeout (like you are) but also store the reference so you can keep resetting the limit. Something like:

_x000D_
_x000D_
//_x000D_
// $('#element').donetyping(callback[, timeout=1000])_x000D_
// Fires callback when a user has finished typing. This is determined by the time elapsed_x000D_
// since the last keystroke and timeout parameter or the blur event--whichever comes first._x000D_
//   @callback: function to be called when even triggers_x000D_
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not_x000D_
//              caused by blur._x000D_
// Requires jQuery 1.7+_x000D_
//_x000D_
;(function($){_x000D_
    $.fn.extend({_x000D_
        donetyping: function(callback,timeout){_x000D_
            timeout = timeout || 1e3; // 1 second default timeout_x000D_
            var timeoutReference,_x000D_
                doneTyping = function(el){_x000D_
                    if (!timeoutReference) return;_x000D_
                    timeoutReference = null;_x000D_
                    callback.call(el);_x000D_
                };_x000D_
            return this.each(function(i,el){_x000D_
                var $el = $(el);_x000D_
                // Chrome Fix (Use keyup over keypress to detect backspace)_x000D_
                // thank you @palerdot_x000D_
                $el.is(':input') && $el.on('keyup keypress paste',function(e){_x000D_
                    // This catches the backspace button in chrome, but also prevents_x000D_
                    // the event from triggering too preemptively. Without this line,_x000D_
                    // using tab/shift+tab will make the focused element fire the callback._x000D_
                    if (e.type=='keyup' && e.keyCode!=8) return;_x000D_
                    _x000D_
                    // Check if timeout has been set. If it has, "reset" the clock and_x000D_
                    // start over again._x000D_
                    if (timeoutReference) clearTimeout(timeoutReference);_x000D_
                    timeoutReference = setTimeout(function(){_x000D_
                        // if we made it here, our timeout has elapsed. Fire the_x000D_
                        // callback_x000D_
                        doneTyping(el);_x000D_
                    }, timeout);_x000D_
                }).on('blur',function(){_x000D_
                    // If we can, fire the event since we're leaving the field_x000D_
                    doneTyping(el);_x000D_
                });_x000D_
            });_x000D_
        }_x000D_
    });_x000D_
})(jQuery);_x000D_
_x000D_
$('#example').donetyping(function(){_x000D_
  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
_x000D_
<input type="text" id="example" />_x000D_
<p id="example-output">Nothing yet</p>
_x000D_
_x000D_
_x000D_

That will execute when:

  1. The timeout has elapsed, or
  2. The user switched fields (blur event)

(Whichever comes first)

~ Answered on 2012-12-26 14:52:31


Most Viewed Questions: