Question

我试图在用户停止输入后3秒触发一个事件，检查输入是否符合最小长度要求。如果是，则显示为有效，如果少于14个字符显示为无效/错误。我希望onkeydown清除计时器，检查肯定的验证，以及它是否无法启动另一个计时器。

var typingTimer;                //timer identifier
var doneTypingInterval = 3000;  //time in ms, 3 second for example

// on keydown, start the countdown
$('#contact_phone').keydown(function(){
clearTimeout(typingTimer);
if ($('#contact_phone').val().length == 14) {
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
}
});

//user is "finished typing," do something
function doneTyping () {
$('#contact_phone').keyup(function() {
    if ($(this).val().length == 14) {
        $(this).removeClass('whiteBorder').removeClass('error').addClass('valid');
    } else {
        $(this).removeClass('whiteBorder').removeClass('valid').addClass('error');
    }
});
}

Answer 1

每次计时器到期时，您都会绑定 keyup事件。

您无需将两个事件都绑定到输入。 “ 删除keydown并用keyup事件替换它。

var typingTimer; //timer identifier
var doneTypingInterval = 3000; //time in ms, 5 second for example

// on keydown, start the countdown
$('#contact_phone').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//user is "finished typing," do something
function doneTyping() {
    var $this = $('#contact_phone');

    if ($this.val().length == 14) {
        $this.removeClass('whiteBorder').removeClass('error').addClass('valid');
    } else {
        $this.removeClass('whiteBorder').removeClass('valid').addClass('error');
    }
}

<强> Check Fiddle

Answer 2

问题是你要等到用户停止输入以绑定keyup事件之后。由于用户已停止输入...此事件永远不会触发。

尝试：

// on keydown, start the countdown
$('#contact_phone').keydown(function () {
    var $input= $(this);
    clearTimeout(typingTimer);
    if ($('#contact_phone').val().length == 14) {
        typingTimer = setTimeout(function () {
            doneTyping($input);
        }, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping($input) {

        if ($input.val().length == 14) {
            $input.removeClass('whiteBorder').removeClass('error').addClass('valid');
        } else {
           $input.removeClass('whiteBorder').removeClass('valid').addClass('error');
        }

}

jQuery计时器无法处理输入

2 个答案: