Javascript Jquery文本框事件，用户停止键入时应立即触发该事件？_Javascript_Jquery

Javascript Jquery文本框事件，用户停止键入时应立即触发该事件？

javascript jquery

Javascript Jquery文本框事件，用户停止键入时应立即触发该事件？,javascript,jquery,Javascript,Jquery,我有一个文本框，上面有“付款”类。此文本框为数字类型。下面是用于此的HTML代码： <input type="number" id="payement-textbox" class="payment" min="0" max="100000" step="any" maxlength="9" value="" /> 我的要求是，如果用户输入任何小于100的数字，则会出现一条警告消息，提示您不能输入小于100的金额但问题是，一旦用户开始键入，它就会不断生成警报消息，而不会让用户

我有一个文本框，上面有“付款”类。此文本框为数字类型。下面是用于此的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");
    } 
});

$（文档）.on（“键控粘贴”，“输入.支付”，函数（事件）{
var num=parseFloat（$（this.val（））；
如果（数值<100）{
警报（“您不能输入少于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);
});

$（文档）.on（“键控粘贴”，“输入.支付”，函数（事件）{
clearTimeout（键入计时器）；
typingTimer=setTimeout（函数（）{
var num=parseFloat（$（this.val（））；
如果（数值<100）{
警报（“您不能输入少于100的金额”）；
} 
, 3000);
});

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

您可能想使用

更改

。当用户从复选框中删除焦点时，它会立即触发

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

$（文档）.on（“更改”，“输入.支付”，函数（事件）{
var num=parseFloat（$（this.val（））；
如果（数值<100）{
警报（“您不能输入少于100的金额”）；
} 
});

或者，更好的做法是，不要发出警报，而是写下错误：

$（文档）.on（“键控粘贴”，“输入.支付”，函数（事件）{
var num=parseFloat（$（this.val（））；
如果（数值<100）{
$（“#错误”）.text（“您不能输入少于100的金额”）
}否则{
$（“#错误”）.text（“”）
}
})；

您可以使用事件，一旦焦点（光标）从输入中移除，事件将立即触发

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

首先请注意，

此

的值需要基于事件处理程序，在这种情况下，您可以在

设置超时

之前在内部定义一个变量作为

var self=this

。这样您就得到了正确的“

this

”。接下来只需定义一个全局

var typingTimer

即可（这样你就不会得到一个未定义的错误）。最后，你似乎有一个打字错误，你没有关闭大括号

以下代码将按照您的预期工作，当用户在3秒钟后停止键入时，如果当前值小于100，将弹出警报：

var-typingTimer；
$（文档）.on（“键控粘贴”，“输入.支付”，函数（事件）{
clearTimeout（键入计时器）；
var self=这个；
typingTimer=setTimeout（函数（）{
var num=parseFloat（$（self.val（））；
如果（数值<100）{
警报（“您不能输入少于100的金额”）；
} 
}, 3000);
})；

在我看来，您的第二次尝试应该可以正常工作，但只需做一个更改，而不是使用

parseFloat（）

使用

parseInt（）

，您已经错过了

$（此）

上下文，因为它不是

输入.payment

元素。相反，您可以使用

.bind（此）

在当前选择器的上下文中运行

设置超时

，或者您可以先用变量缓存它，然后使用它。请参见下面的操作：

var-typingTimer；
$（文档）.on（“键控粘贴”，“输入.支付”，函数（事件）{
clearTimeout（键入计时器）；
typingTimer=setTimeout（函数（）{
var num=parseInt（$（this）.val（），10）；
如果（数值<100）{
警报（“您不能输入少于100的金额”）；
}//为什么不将min
属性设置为100
…？您的意思是.change（）事件？@Rorymcrossan：为了说明起见，我写了值100。但实际上它不是100。它是一个动态生成的值……所以也动态设置min
属性？你可以让这比你简单得多。我99%肯定会的，但我无法帮助你解决你提供的信息不足的问题，所以我会祝你好运ave使用了更改事件..但它不会在用户停止键入时立即触发警报消息。用户必须单击页面上的任何位置，然后才会触发。您已经完全输入了我的代码。您阅读了我的查询吗？我只需要生成浏览器警报消息。只有当用户停止键入时，浏览器警报才会出现。这不会发生在更改事件中。@Ted杜：我没有准确地输入你的代码。你读过我的答案吗？为什么写错误是个问题？因为“警告”消息是我的要求。我不能写错误。它不在我手中。请针对所问的问题进行说明。我已经尝试过模糊事件。但它不会在用户停止键入时立即触发。用户必须单击页面上的某个位置，然后才可以执行它fires@Teddu我不认为有任何事件表明，如果用户已经停止键入，因为光标仍将处于输入框中我的状态为“小于”100.编辑你的JSFIDLE代码。然后你会看到它不工作。请检查整个更新的代码，它将按照你的意愿执行code@Teddu如果您将时间从3000毫秒减少到1000或500毫秒，您将获得实时警报。@Teddu您不必将parseFloat
放入超时内移动它在外面，它会工作的。只要注意if的关闭。@Jai是的，我注意到了，我主要是在的范围内做的，这个在setTimeout（）内是不同的。既然你的解决方案已经涵盖了它，我认为我没有必要编辑它。@SpencerWieczorek这很好。但这是一个快速而好的解决方案。@SpencerWieczorek:但是这个解决方案有一个局限性，就是在一个表中有这么多这样的文本框。我需要对这些文本框的所有值求和。所以我要做的是：$（“.payment”）.each（function（）{if（$（this.val（）！=“”）{sum=sum+parseFloat（$（this.val（））；}}）；但当我将sum放入tim中时，它的值是sum的八倍
 <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>

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