Question

我收到了这段代码：

var $this = $(this);
var val = $this.val();
var max = $this.attr("max");
var min = $this.attr("min");

if (max > 0 && val > max){
    e.preventDefault();
    $this.val(max);
}
else if (min > 0 && val < min)
{
    e.preventDefault();
    $this.val(min);
}

问题是，例如当min/max为70/250并且用户尝试输入200时，它会立即从2更正为70 -_-所以我需要keyup上的超时/延迟，所以我试过了：

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();


$("input").keyup(function(e) {
    delay(function(){
        var $this = $(this);
        var val = $this.val();
        var max = $this.attr("max");
        var min = $this.attr("min");

        if (max > 0 && val > max){
            e.preventDefault();
            $this.val(max);
        }
        else if (min > 0 && val < min)
        {
            e.preventDefault();
            $this.val(min);
        }
    }, 1000 );
});

但现在纠正并没有被执行。怎么做对了？有没有人有一个想法来解决＆＃34;键入200而不立即纠正＆＃34;问题

Answer 1

您正在寻找的是“去抖动”：您可能想要修补此解决方案： https://davidwalsh.name/javascript-debounce-function

Answer 2

您可以使用Jquery焦点输出功能。

https://www.w3schools.com/jquery/event_focusout.asp

这将检查用户何时移动到另一个字段或输入部分，然后执行验证。不需要定时器或延迟。

$("input").focusout(function(e) {
        var $this = $(this);
        var val = $this.val();
        var max = $this.attr("max");
        var min = $this.attr("min");

        if (max > 0 && val > max){
            e.preventDefault();
            $this.val(max);
        }
        else if (min > 0 && val < min)
        {
            e.preventDefault();
            $this.val(min);
        }
});

jQuery - 正确输入min / max并在keyup上有延迟

2 个答案: