Question

I have a text box that accepts integers, and I need it to run a function that will use the text box’s input, as soon as a user inputs numbers into the field.

The problem here is that keyUp() will detect each and every input. So if I type 23, it will fire once for 2 and once for 3. I only need it to run when the input is complete.

Is there a way to do this, without losing focus and without using a timer that will keep checking the text box input every while using setInterval?

Answer 1

Look like you want to be notified when the user stops typing. The following code can be used as a starting point, it calls bufferedKeyUp 300 ms after the user stops typing. http://jsfiddle.net/mendesjuan/VTMEe/

$(function() {
    // Creates a handler that will wait until the event hasn't fired for a period 
    // before it fires the actual event handler
    function createBuffered(fun, delay) {
        var timer;
        return function() {
            clearTimeout(timer);
            var args = arguments;
            var me = this;
            timer = setTimeout(function() {
               fun.apply(me, args);
            }, delay);        
        }
    }   

    $('#in').keyup( createBuffered(function(){
        console.log('change');
    }, 300));
});​

Ext-JS has a nice simple way to do this http://jsfiddle.net/mendesjuan/DYkmU/1/

Ext.get('myid').on('keyup', function() {
  console.log('change');
}, null, {buffer: 300});