Javascript: выполнять обработку, когда пользователь прекратил печатать

Question

У меня есть текстовое поле на веб-странице, значение которого я хочу отправить в XMLHttpRequest. Теперь я хочу, чтобы пользователь просто набрал значение, не нажимая кнопку. Но если я просто отправлю запрос на события клавиатуры, он будет срабатывать при каждом нажатии клавиши.

Так что в основном я хочу что-то подобное

function KeyUpEvent()
{
  if (user is still typing)
    return;
  else 
    //do processing
}

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

Answer 1

Обычно это делается путем перезапуска таймера события 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");
}

Answer 2

Как правило, вы хотите запустить таймер на 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);
}

Просто прикрепите функцию к входу, используя предпочитаемый вами метод, изамените alert на предпочитаемое вами действие.

Конечно, вы можете обобщить этот подход и сделать его более пригодным для повторного использования и т. д., но я думаю, что это иллюстрирует основную идею.

Answer 3

Я всегда использую эту простую функцию для обработки таймера, который будет запускать функцию обратного вызова после того, как пользователь перестал вводить текст в течение указанного времени:

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, обработчику событий не нужно ничего знать о таймере, это просто вызывает функцию. Кроме того, нет глобальных переменных, о которых нужно заботиться (идентификатор таймера не хранится в глобальной переменной).

Answer 4

Вы никогда не знаете, когда пользователь действительно «закончил» печатать. Пользователь может сделать перерыв на чихание, перерыв или кофе-брейк, а затем продолжить печатать.

Однако, если вы реализуете что-то вроде механизма автозаполнения, вы можете установить таймер (см. window.setTimeout(...)), чтобы увидеть, не набрал ли пользователь что-либо за определенное время. Если во время работы таймера вы получаете другое событие нажатия клавиши, вы можете запустить таймер заново.

Answer 5

var keyTimer;
function onKeyUp(){
clearTimeout(keyTimer);
setTimeout(stoppedTyping,1500);
}
function stoppedTyping(){
// Profit! $$$
}

РЕДАКТИРОВАТЬ: Черт ниндзя

Answer 6

Я написал собственное событие jQuery, потому что я часто использую эту логику:

jQuery.event.special.stoppedtyping = {
  setup: function(data, namespaces) {
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler);
  },
  teardown: function(namespaces) {
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler);
  },
  keyuphandler: function(e) {
    var interval = 1000;
    var el = this;

    if (jQuery.data(this, 'checklastkeypress') != null) {
      clearTimeout(jQuery.data(this, 'checklastkeypress'));
    }

    var id = setTimeout(function() {
      jQuery(el).trigger('stoppedtyping');
    }, interval);
    jQuery.data(this, 'checklastkeypress', id);
  }
};

Вы можете использовать это так:

$('input.title').bind('stoppedtyping', function() {
  // run some ajax save operation
});

По какой-то причине я никогда не смог заставить его работать с .live (...). Я не уверен, почему ...

Answer 7

Используйте onBlur и, возможно, onKeyDown, чтобы проверить, нажимает ли пользователь клавишу возврата / ввода.