Автоматическая отправка формы через x миллисекунд неактивной клавиатуры
-
10-07-2019 - |
Вопрос
В моей форме у меня есть набор полей ввода, в которые пользователь может ввести значение.При изменении одного из этих полей форма автоматически отправляется.
Однако проблема теперь в том, что пользователь остается в последнем поле, берет мышь и нажимает кнопку «ОК» (другой формы), не выходя предварительно из текстового поля.Событие изменения не запускается, и старые неправильные значения передаются на следующую страницу.
Я хочу вызвать событие onchange через несколько миллисекунд неактивной клавиатуры.Как и большинство плагинов автозаполнения.
Я думаю, я мог бы реализовать таймер, который начинает отсчет времени в тот момент, когда вы вводите поле ввода, и сбрасывается каждый раз, когда обрабатывается нажатие клавиши, а затем, когда он достигает нуля, запускается событие onchange.
Я не собираюсь изобретать велосипед, и мне было интересно, доступна ли где-нибудь такая функция.
Предложения?
Решение
У меня была аналогичная проблема, и я создал плагин 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!
});
Другие советы
Не работает ли onBlur, поэтому, когда пользователь переходит к следующему полю или щелкает что-то еще, значение сохраняется?
Я не знаю, что такое решение будет считаться "переизобретением" что-нибудь. Как вы сказали, это звучит как простой setTimeout после загрузки страницы. Примерно через 3000 миллисекунд он запускает form.submit ().
Я бы, вероятно, возобновил обратный отсчет при каждом нажатии клавиши, чтобы дать пользователю достаточно времени, чтобы сделать свою запись.