jQuery - 正確輸入min / max並在keyup上有延遲

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 );
});

但現在糾正沒有得到執行。 怎么做對了？ 有沒有人有一個想法來解決“打字200而不立即糾正”的問題？

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);
        }
});