Question

我有一个文本框，上面有＃34;付款＆＃34;。此文本框是数字类型。以下是HTML代码：

<input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />

我的要求是，如果用户输入少于100的任何数字，则会出现一条警告消息，指出您不能输入少于100的数量。

但问题在于，一旦用户开始输入，它就会在不让用户完全写入的情况下继续生成警报消息。以下是相同的代码：

$(document).on("keyup paste",'input.payment', function(event) {
     var num = parseFloat($(this).val());
    if ( num < 100) {
         alert("you cannot enter an amount less than 100");
    } 
});

我了解了clearTimeout。我用这种方式使用它：

 $(document).on("keyup paste",'input.payment', function(event) {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function(){
             var num = parseFloat($(this).val());
                if ( num < 100) {
                     alert("you cannot enter an amount less than 100");
                } 
        , 3000);
});

但它不起作用。有什么想法吗？

Answer 1

首先请注意，this的值需要基于事件处理程序，在这种情况下，您可以在setTimeout之前将变量定义为var self = this。这样您就可以获得正确的“this”。接下来定义您的计时器只需一个全局var typingTimer即可（这样您就不会得到未定义的错误）。最后，你似乎有一个错字，你没有关闭支撑。

以下代码将按预期工作，当用户在3秒后停止输入时，如果当前值小于100，则会弹出警告：

  var typingTimer;

  $(document).on("keyup paste",'input.payment', function(event) {
      clearTimeout(typingTimer);
      var self = this;
      typingTimer = setTimeout(function(){
        var num = parseFloat($(self).val());
        if ( num < 100) {
          alert("you cannot enter an amount less than 100");
        } 
      }, 3000);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />

Answer 2

您可能想要使用change。一旦用户从复选框中移除焦点，它就会触发。

$(document).on("change",'input.payment', function(event) {
     var num = parseFloat($(this).val());
    if ( num < 100) {
         alert("you cannot enter an amount less than 100");
    } 
});

或者，更好的是，不要提醒但写错误：

$(document).on("keyup paste", 'input.payment', function(event) {
  var num = parseFloat($(this).val());
  if (num < 100) {
    $("#error").text("you cannot enter an amount less than 100")
  } else {
    $("#error").text("")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />
<div id="error" style="color:red"></div>

Answer 3

在我看来，您的第二次尝试应该有效，但只需更改一次，而不是parseFloat()使用parseInt()而您错过了$(this)上下文，因为那不是input.payment元件。相反，您可以使用.bind(this)在当前选择器的上下文中运行setTimeout，或者您可以使用变量将其缓存，然后使用它。见下面的工作：

＆＃13;

var typingTimer;
$(document).on("keyup paste", 'input.payment', function(event) {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(function() {
    var num = parseInt($(this).val(), 10);
    if (num < 100) {
      alert("you cannot enter an amount less than 100");
    }  // <------------You have missed this closing.
  }.bind(this), 3000); // <================see here.
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />

＆＃13;

或者另一个解决方案是将变量移出timout：

＆＃13;

var typingTimer;
$(document).on("keyup paste", 'input.payment', function(event) {
  var num = parseFloat($(this).val());
  clearTimeout(typingTimer);
  typingTimer = setTimeout(function() {
    if (num < 100) {
      alert("you cannot enter an amount less than 100");
    } // <-------you have missed this closing.
  }, 3000); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />

＆＃13;

Answer 4

您可以使用blur事件，一旦从输入中移除焦点（光标），就会触发该事件

$(document).on("blur paste",'input.payment', function(event) {
    // Rest of the code 
});

JSFIDDLE

Answer 5

 <html>
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
     $(document).ready(function(){
      var timer; 
var typingInterval = 2000;
var value = $('#payement-textbox')

value.on('keyup', function () {
  clearTimeout(timer);
  timer = setTimeout(abcd, typingInterval);
});

//on keydown, clear the countdown 
value.on('keydown', function () {
  clearTimeout(timer);
});

//user is "finished typing," do something
function abcd () {
    if($('#payement-textbox').val()<100)
  alert('No can not be less than 100');
}
      })
    </script>
   </head>
   <body>
    <input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" />
   <body>
   </html>

选中此fiddle

或使用underscore.js

$('.payment').keyup(_.debounce(abcd , 500));

Jquery文本框事件，一旦用户停止输入就应该触发？

5 个答案: