代码之家 › 专栏 › 技术社区 › Midhat

javascript:当用户停止输入时进行处理

mootools javascript

Midhat · 技术社区 · 15 年前

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

所以基本上我想要点什么

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

如果解决方案可以来自普通的javascript或mootools,那就太好了。我不想用别的图书馆。

7 回复 | 直到 14 年前

cmptrgeekken 15 年前

通常的方法是重新启动 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");
}

Avi Flax 15 年前

基本上,你需要在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 用你喜欢的动作。

当然,有很多方法可以概括这种方法并使其更可重用,等等,但我认为这说明了基本思想。

Christian C. Salvadó 15 年前

我总是使用这个简单的函数来处理计时器,当用户在指定的时间内停止键入时,计时器将触发回调函数:

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 函数本身,事件处理程序不需要知道有关计时器的任何信息,它只是调用函数。另外,没有需要注意的全局变量(计时器id是不存储在全局变量中)。

Will 15 年前

你永远不知道用户什么时候真正完成了打字。用户可能需要打喷嚏休息,或拉伸休息,或咖啡休息,然后继续打字。

但是,如果要实现类似于自动完成机制的功能,则可以设置计时器(cf. window.setTimeout(...) )查看用户是否在一定时间内没有键入任何内容。如果在计时器运行时收到另一个键启动事件,则可以重新启动计时器。

user216441 15 年前

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

编辑:该死的忍者

Venkat D. 14 年前

我编写了一个自定义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
});

因为某些原因,我无法让它工作。生活(…)我不知道为什么…

-1

nicerobot 15 年前

使用onblur或者onkeydown检查用户是否按了return/enter键。