Автоматическая отправка формы через x мили секунд неактивной клавиатуры - PullRequest
Новая
       30

Автоматическая отправка формы через x мили секунд неактивной клавиатуры

4 голосов
/ 24 июня 2009

В моей форме у меня есть набор полей для ввода, где пользователь может ввести значение. При изменении одного из этих полей форма автоматически отправляется.

Однако теперь проблема заключается в том, что пользователь остается в последнем поле, берет мышь и нажимает кнопку ОК (другой формы), не покидая текстовое поле первым. Событие изменения не запускается, и старые, неправильные значения передаются на следующую страницу.

Я хочу вызвать событие onchange после нескольких миллисекунд неактивной клавиатуры. Как и большинство плагинов автозаполнения.
Я думаю, что я мог бы реализовать таймер, который начинает отсчет времени, как только вы вводите поле ввода, и сбрасывается каждый раз при обработке нажатия клавиши, а затем, когда он достигает нуля, запускается событие onchange.

Я не за то, чтобы заново изобретать колесо, и мне было интересно, доступна ли такая функция где-нибудь.
Предложения?

Ответы [ 3 ]

6 голосов
/ 24 июня 2009

У меня была похожая проблема, и я создал плагин jQuery, который в настоящее время используется во внутреннем приложении. Это должно вызвать событие изменения после того, как пользователь закончил печатать.

Если вы не используете jQuery, код по-прежнему можно адаптировать к чему-либо еще. 

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

Использование: 

$("#my_input").handleKeyboardChange(300).change(function()
{
    // value has changed!
});
0 голосов
/ 24 июня 2009

Не работает ли onBlur, поэтому, когда пользователь переходит к следующему полю или щелкает что-то еще, значение сохраняется?

0 голосов
/ 24 июня 2009

Я не знаю, что такое решение будет считаться «переизобретением» чего-либо. Как вы сказали, это звучит как простой setTimeout после загрузки страницы. Примерно через 3000 миллисекунд он запускает form.submit ().

Я бы, вероятно, возобновил обратный отсчет при каждом нажатии клавиши, чтобы дать пользователю достаточно времени для ввода.

...