Question

我希望在用户完成文本框输入后执行类似2秒的功能。如果它们在1秒后继续输入，延迟时间将重置为2。

它应该起到类似于自动完成框的作用。

我知道有两件事：change和keyup。我对change的问题是文本框必须放松焦点才能触发它。对于keyup，如果他们使用鼠标粘贴文本会怎么样？

我可以在这里得到帮助吗？

Answer 1

所有当前主流浏览器都支持HTML5 oninput事件，可以使用IE 8及更低版本：

$("#myInput").bind("input", function () {
    // ...
})

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript（解释）
http://whattheheadsaid.com/projects/input-special-event（插件）

一种非常简单的跨浏览器方法

$("#myInput").bind("input propertychange", function (evt) {
    // If it's the propertychange event, make sure it's the value that changed.
    if (window.event && event.type == "propertychange" && event.propertyName != "value")
        return;

    // Clear any previously set timer before setting a fresh one
    window.clearTimeout($(this).data("timeout"));
    $(this).data("timeout", setTimeout(function () {
        // Do your thing here
    }, 2000));
});

这将使事件在IE 9中触发两次（一个用于propertychange，一个用于input），但由于事件处理程序的性质而无关紧要。

Answer 2

您可以绑定input事件以及keyup以便在旧版浏览器上进行后备。然后，您可以启动计时器，每次检测到用户操作时，计时器都会重置。通过在当前元素的数据中保存计时器句柄，可以确保多个元素不会相互干扰。

$('input').bind('input keyup', function(){
    var $this = $(this);
    var delay = 2000; // 2 seconds delay after last input

    clearTimeout($this.data('timer'));
    $this.data('timer', setTimeout(function(){
        $this.removeData('timer');

        // Do your stuff after 2 seconds of last user input
    }, delay));
});

Answer 3

您可以同时进行更改和加密：

var globalTimeout;

$(function() {
    $("#myInput").change(initTimer).keyup(initTimer);
});

function initTimer() {
    if (globalTimeout) clearTimeout(globalTimeout);
    globalTimeout = setTimeout(handler, 2000);
}

function handler() {
    ...
}

Answer 4

keyup将有效：

$("#s").keyup(function(e){
    $("#t").html($(this).val());
});

Jsfiddle：http://jsfiddle.net/3nx6t/

Answer 5

我会这样做：

$("selector").keyup(function(){
   if(typeof(window.delayer) != 'undefined')
      clearTimeout(window.delayer);
   window.delayer = setTimeout(function_you_want_to_get_execute_with_delay, 2000);
});

干杯

jQuery值更改事件延迟

5 个答案: