JavaScript: Сделайте обработку, когда пользователь прекратит вводить
У меня есть текстовое поле на веб-странице, значение которой я хочу отправить XMLHttpRequest. Теперь я хочу, чтобы пользователь просто ввел значение, не нажимая кнопку. Но Если я просто отправлю интервал запроса он события клавиатуры, то он будет стрелять каждый раз, когда клавиша нажата.
Так в основном я хочу что-то liek это
function KeyUpEvent()
{
if (user is still typing)
return;
else
//do processing
}
Было бы замечательно, если решение могло бы прибыть из плоскости JavaScript или mootools. Я не хочу пользоваться любой другой библиотекой.
6 ответов
Обычно это делается путем перезапуска таймера при событии keyup . Примерно так:
var keyupTimer;
function keyUpEvent(){
clearTimeout(keyupTimer);
keyupTimer = setTimeout(sendInput,1000); // will activate when the user has stopped typing for 1 second
}
function sendInput(){
alert("Do AJAX request");
}
Я всегда использую эту простую функцию для обработки таймера, который запускает функцию обратного вызова после того, как пользователь перестал печатать в течение определенного времени:
var typewatch = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
}
})();
Использование (пример с MooTools):
$('textInput').addEvent('keyup', function(e){
typewatch(function () {
// executed only 500 ms after the last keyup event
// make Ajax request
}, 500);
});
Основное отличие этого решения от других ответов состоит в том, что вся логика таймера обрабатывается самой функцией typewatch , Обработчику событий не нужно ничего знать о таймере, он просто вызывает функцию.Кроме того, нет глобальных переменных, о которых нужно позаботиться (идентификатор таймера , а не хранится в глобальной переменной).
По сути, вы хотите запустить таймер на KeyUp, а когда KeyUp запустится снова, сбросьте таймер. Когда пользователь перестает печатать, таймер истекает, и ваш запрос может быть выполнен в этот момент.
Пример:
var timout_id;
function keyup_handler(event) {
if (timout_id) {
clearTimeout(timout_id);
}
timout_id = setTimeout(function(){
alert('sending data: \n' + event.target.value)
}, 800);
}
Просто прикрепите функцию к входу, используя предпочитаемый вами метод, и замените предупреждение своим предпочтительным действием.
Конечно, есть много способов обобщить этот подход и сделать его более пригодным для повторного использования и т. Д., Но я думаю, что это иллюстрирует основную идею.
Никогда не знаешь, когда пользователь действительно «закончил» печатать. Пользователь может сделать перерыв на чихание, перерыв на растяжку или перерыв на кофе, а затем продолжить печатать.
Однако, если вы реализуете что-то вроде механизма автозаполнения, вы можете установить таймер (см. window.setTimeout (...) ), чтобы увидеть, не ввел ли пользователь что-либо в определенное количество времени. Если вы получите еще одно событие нажатия клавиши во время работы таймера, вы можете запустить таймер заново.
Используйте onBlur и, возможно, onKeyDown, чтобы проверить, нажимает ли пользователь клавишу возврата / ввода.
var keyTimer;
function onKeyUp(){
clearTimeout(keyTimer);
setTimeout(stoppedTyping,1500);
}
function stoppedTyping(){
// Profit! $$$
}
EDIT: Чертовы ниндзя