Question

我在网页上有一个文本框，我想将其值发送到XMLHttpRequest。现在我希望用户只需键入值，而无需按下按钮。但是，如果我只是在键盘事件中发送请求，则每次按下键时都会触发。

所以基本上我想要一些谎言这个

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

如果解决方案可以来自普通的javascript或mootools，那就太好了。我不想使用任何其他库。

Answer 1

基本上，你想在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 2

通常这样做的方法是在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 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);
});

此解决方案与其他答案的解决方案之间的主要区别在于 all 计时器逻辑由typewatch函数本身处理，事件处理程序不需要知道任何关于计时器，它只是调用函数。此外，没有全局变量需要注意（计时器ID 不存储在全局变量中）。

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检查用户是否按下return / enter键。

Javascript：在用户停止输入时进行处理

7 个答案: