警报框需要多次关闭

时间:2019-05-28 09:32:06

标签: javascript jquery

我正在检查表单字段的值,如果该值大于5,则会弹出一个警告框。这可行,但是我注意到,如果我在字段中填写1次,则警报框可以正常关闭。如果然后输入新的值(也高于5),则需要两次关闭警报框,如果要输入第三个值,则需要关闭三次。等等...

我阅读了有关Stackoverflow的几个相关问题,但似乎没有一个是相同的问题或相关。

window.onload = function() {
  displayField();
};


function displayField() {
  jQuery('#groupnumber').change(function() {
    var amount5 = jQuery('#groupnumber').val();
    if (amount5 > 5) {
      alert('Alert message');
    }
  });
};

//Trigger javascript on leaving field
onblur = "displayField();"

因此它“保持得分”。如果我第二次输入另一个值,但仍高于5,我希望警报框仅显示一次。

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

问题是因为每次发生file.delete()事件时您都会调用displayField(),这反过来又增加了另一个blur事件处理程序。因此,当下一个change发生时,所有这些处理程序的所有都会执行。

您可以通过不显眼地附加事件来解决此问题。这样,仅在页面加载时才添加单个事件,并且只要元素上发生所选事件,它就会触发。

  

这确实有效,但是有一个缺点:如果输入78,则在输入7后直接显示警告框,而不是显示有人准备好输入时。如何避免呢?

为缓解这种情况,您可以“消除抖动”事件,以便仅在键入结束后的X毫秒内显示警报。您可以使用change来做到这一点:

setTimeout()
jQuery(function($) {
  var timer;

  $('#groupnumber').on('input', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      var amount5 = $('#groupnumber').val();
      if (amount5 > 5) {
        alert('Alert message');
      }
    }, 200);
  }).trigger('input'); // fire the event when the page loads
});

请注意document.ready处理程序中<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="groupnumber" />的别名。这意味着您仍然可以在块中使用$来引用$,从而使您的代码更加冗长。

答案 1 :(得分:0)

您可以使用setTimeout包装window.onload函数,以便用户有足够的时间输入其号码

window.onload = function() {
setTimeout(function(){
  displayField();
  }, 2000)
};


function displayField() {
  jQuery('#groupnumber').change(function() {
    var amount5 = jQuery('#groupnumber').val();
    if (amount5 > 5) {
      alert('Alert message');
    }
  });
};

//Trigger javascript on leaving field
onblur = "displayField();"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="groupnumber" />