jQuery的 - 正確的輸入最小值/最大值與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

你可以使用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); 
     } 
}); 

Answer 2

什麼你正在尋找被稱爲「反跳」：您可能需要使用該解決方案鼓搗： https://davidwalsh.name/javascript-debounce-function