Created
September 3, 2018 07:20
-
-
Save flionic/33376f28bfbe5cbaababf9cd97d20735 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// $('#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 paste',function(e){ | |
// This catches the backspace button in chrome, but also prevents | |
// the event from triggering too preemptively. 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); | |
}, timeout); | |
}).on('blur',function(){ | |
// If we can, fire the event since we're leaving the field | |
doneTyping(el); | |
}); | |
}); | |
} | |
}); | |
})(jQuery); | |
$('#example').donetyping(function(){ | |
$('#example-output').text('Event last fired @ ' + (new Date().toUTCString())); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment