Done Typing Event

Trigger an event when a user has finished typing.

by Brad Christie

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/flatly/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="jumbotron">
    <div class="container">
        <h2>
            <i class="fa fa-fw fa-hand-o-down"></i>
            Done Typing (jQuery Plugin)
        </h2>
        <p>Trigger an event when a user has finished typing.</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-info">
                <p>
                    <span class="fa-stack">
                        <i class="fa fa-square-o fa-stack-2x"></i>
                        <i class="fa fa-info fa-stack-1x"></i>
                    </span>
                    Each field will show a timestamp below it when the event has triggered.
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Default Usage</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <input type="text" class="form-control" id="example1" placeholder="Begin typing..." />
                            <p class="help-block"><code>blur</code> event or 1 second after typing&mdash;whichever comes first.</p>
                        </div>
                    </form>
                </div>
                <div class="panel-footer">
                    <p class="text-muted">Nothing to report.</p>
                </div>
            </div>
        </div>
        <div...

JavaScript

// How to trigger an event in input text after I stop typing/writing?
// http://stackoverflow.com/q/14042193/298053

//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too premptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    },...