Auto enviar o formulário depois de segundos x mili de teclado inativo

Question

Na minha forma eu tenho um conjunto de caixas de entrada, onde uma entrada de usuário pode um valor. Sobre a mudança de uma dessas caixas, o formulário automaticamente é apresentado.

O problema agora é, porém, que um usuário permanece no último campo, leva o rato e pressiona o botão OK (de outra forma) sem deixar a caixa de texto em primeiro lugar. O evento de alteração não fica acionado e os valores antigos, incorretas são passadas para a próxima página.

Eu quero disparar o evento onchange depois de alguns milisegundos de teclado inativo. Assim como a maioria dos plugins autocomplete fazer.
Eu acho que eu poderia implementar um temporizador que inicia a contagem do momento que entrar um campo de entrada e fica resetted toda vez que uma tecla é tratado e depois quando chega a zero o evento onchange é acionado.

Eu não estou aqui para re-inventar a roda e queria saber se tal função está disponível em algum lugar.
Sugestões?

Answer 1

Eu tive um problema semelhante e criou um plugin jQuery atualmente em uso em um aplicativo interno. Ele deve acionar o evento de alteração depois que o usuário é feito de digitação.

Se você não estiver usando jQuery, o código ainda é adaptável a qualquer outra coisa.

jQuery.fn.handleKeyboardChange = function(nDelay)
{
    // Utility function to test if a keyboard event should be ignored
    function shouldIgnore(event) 
    { 
        var mapIgnoredKeys = {
             9:true, // Tab
            16:true, 17:true, 18:true, // Shift, Alt, Ctrl
            37:true, 38:true, 39:true, 40:true, // Arrows 
            91:true, 92:true, 93:true // Windows keys
        };
        return mapIgnoredKeys[event.which];
    }

    // Utility function to fire OUR change event if the value was actually changed
    function fireChange($element)
    {
        if( $element.val() != jQuery.data($element[0], "valueLast") )
        {
            jQuery.data($element[0], "valueLast", $element.val())
            $element.trigger("change");
        }
    }

    // The currently running timeout,
    // will be accessed with closures
    var timeout = 0;

    // Utility function to cancel a previously set timeout
    function clearPreviousTimeout()
    {
        if( timeout )
        { 
            clearTimeout(timeout);
        }
    }

    return this
    .keydown(function(event)
    {
        if( shouldIgnore(event) ) return;
        // User pressed a key, stop the timeout for now
        clearPreviousTimeout();
        return null; 
    })
    .keyup(function(event)
    {
        if( shouldIgnore(event) ) return;
        // Start a timeout to fire our event after some time of inactivity
        // Eventually cancel a previously running timeout
        clearPreviousTimeout();
        var $self = $(this);
        timeout = setTimeout(function(){ fireChange($self) }, nDelay);
    })
    .change(function()
    {
        // Fire a change
        // Use our function instead of just firing the event
        // Because we want to check if value really changed since
        // our previous event.
        // This is for when the browser fires the change event
        // though we already fired the event because of the timeout
        fireChange($(this));
    })
    ;
}

Uso:

$("#my_input").handleKeyboardChange(300).change(function()
{
    // value has changed!
});

Answer 2

Será que não trabalho para fazer um onBlur, por isso, tanto quando o usuário move para o campo ou cliques próxima outra coisa, o valor é salvo?

Answer 3

Eu não sei que essa solução de um seria considerado algo "inventar re-". Como você disse, parece ser nada mais do que um setTimeout simples uma vez que a página é carregada. Depois de cerca de 3.000 milissegundos, corre form.submit ().

Eu provavelmente reiniciar a contagem regressiva com cada keystroke também, para dar ao usuário tempo suficiente para fazer a sua entrada.