Detect when user type done

0.74K views
no comments
13 Nov 2014 12:40 am

In normally we cannot trigger with events of javascript keyup, keydown, keypress, when user typing done, I am also faced that challenge on a project where I am doing job of programmer, so I want to share that technique how to call your function when user done typing, I have created a function in #jquery to detect if user have done typing on field, we need this function when we develop functionality of auto search in websites.

Here is defined by me function for type done.

$.fn.extend({
	typeDone: function (call_func, wait_time) {
		var this_ele = $(this);
		if (typeof wait_time === 'undefined' || isNaN(wait_time)) {
			var wait_time = 950;
		}
		this_ele.on('keypress', function (eve) {
			if(eve.charCode){
				var key_count = this_ele.attr('data-keyout');
				if (isNaN(key_count)) {
					key_count = 0;
				} else {
					key_count = parseInt(key_count) + 1;
				}
				this_ele.attr('data-keyout', key_count);
				var is_typedone;
				var clear_timeout;
				is_typedone = false;
				clear_timeout = setTimeout(function () {
					var key_count = parseInt(this_ele.attr('data-keyout')) - 1;
					this_ele.attr('data-keyout', key_count);
					if (is_typedone == true) {
						return false;
					}
					if (isNaN(key_count) || key_count < 0) {
						is_typedone = true;
						clearTimeout(clear_timeout);
						this_ele.removeAttr('data-keyout');
						if (typeof call_func === 'function') {
							call_func();
						}
					}
				}, wait_time);
			}
			
		});
	}
});

Here is example how to call your function when user type done.

in typeDone function first parameter is your anonymous function and second parameter for waiting time, how much function wait when user typedone.

$('.test_typeDone').typeDone(function () {
	alert('typing done!!!');
}, 900);

NOTE:Your Email Address will be not shown and please do not add spamming comments because here is REL="NOFOLLOW" on your links and comments also moderated shown.
<code>Put html css or any language code under this tag</code>