11Aug/100
On typing finished jQuery plugin
If you are developing a form and you require certain validations; check if username is available or not for example - the way to do that is to listen for the change/focusout DOM events. You can also check it on every keypress but if the validation does some expensive checking in the background that is out of the question. So here is a really small jQuery plugin that does tell you when a user finished typing inside a text box. The way it does it is to compute the speed the user is typing with and when a delay longer than twice the speed average occurs, the event is triggered and your validation function is called. Simple enough.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function () { $.fn.onTypeFinished = function(func) { var T = undefined, S = 0, D = 1000; $(this).bind("keypress", onKeyPress).bind("focusout", onTimeOut); function onKeyPress() { clearTimeout(T); if (S == 0) { S = new Date().getTime(); D = 1000; T = setTimeout(onTimeOut, 1000); return; } var t = new Date().getTime(); D = (D + (t - S)) / 2; S = t; T = setTimeout(onTimeOut, D * 2); } function onTimeOut() { func.apply(); S = 0; } return this; }; }); |
The way to use it:
1 | $("input[name='username']").onTypeFinished(myValidationFunction) |
And here is a small demo:
October 21st, 2010 - 11:31
Cool Just what I needed
thanks
November 4th, 2010 - 19:13
This is great. Nice work mate!
May 3rd, 2011 - 16:08
this is awesome! very smart solution to the problem.
June 2nd, 2011 - 11:03
as nice as simple! thanks!
June 3rd, 2011 - 13:02
backspace dosent work on chrome 10.0.
but works correctly on ff
July 22nd, 2011 - 07:09
use keyup instead of keypress
May 29th, 2014 - 23:13
how to disable this event later?
May 30th, 2014 - 08:45
you can do a $(“#your_element”).unbind() to remove all events on that field.