Auto einreichen Form nach x mili Sekunden inaktiv Tastatur

Question

In meiner Form habe ich einen Satz von Eingabefeldern, in denen ein Benutzer einen Wert Eingang. Auf den Wechsel von einem dieser Felder, wird das Formular automatisch übermittelt.

Das Problem ist nun aber, dass ein Benutzer im letzten Feld bleibt, nimmt die Maus und drückt die Taste OK (von einer anderen Form), ohne die Textbox zu verlassen zuerst. Das Änderungsereignis wird nicht ausgelöst und die alten, falschen Werte erhalten auf die nächste Seite übergeben.

Ich mag das Ereignis onchange nach wenigen Millisekunden von inaktiver Tastatur auszulösen. Genau wie die meisten der automatischen Vervollständigung Plugins tun.
Ich glaube, ich könnte einen Timer implementieren, die in dem Moment beginnt Timing Sie ein Eingabefeld eingeben und jedesmal, wenn ein Tastendruck zurückgesetzt wird behandelt wird und dann, wenn es Null das onchange Ereignis erreicht wird ausgelöst.

Ich bin nicht nach oben, um das Rad neu zu erfinden und frage mich, ob eine solche Funktion irgendwo verfügbar ist.
Vorschläge?

Answer 1

Ich hatte ein ähnliches Problem und erstellt derzeit eine jQuery-Plugin im Einsatz in einer internen Anwendung. Es sollte das Änderungsereignis auslösen, nachdem der Benutzer die Eingabe erfolgt ist.

Wenn Sie nicht jQuery verwenden, der Code ist noch anpassungsfähig an irgendetwas anderes.

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));
    })
    ;
}

Verbrauch:

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

Answer 2

Geht es keine onBlur zu tun, also beide, wenn der Benutzer bewegt sich auf das nächste Feld oder etwas anderes klickt, wird der Wert gespeichert?

Answer 3

Ich weiß nicht, dass eine solche Lösung wäre „neu zu erfinden“ alles in Betracht gezogen werden. Wie Sie gesagt haben, klingt es nicht mehr als eine einfache SetTimeout einmal die Seite geladen werden. Nach etwa 3000 Millisekunden, es läuft form.submit ().

Ich würde wahrscheinlich den Count-Down mit jedem Tastendruck neu starten, auch dem Benutzer genügend Zeit zu geben, ihre Eingabe zu machen.