Question

我正在检查表单字段的值，如果该值大于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，我希望警报框仅显示一次。

感谢您的帮助！

Answer 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" />的别名。这意味着您仍然可以在块中使用$来引用$，从而使您的代码更加冗长。

Answer 2

您可以使用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" />

警报框需要多次关闭

2 个答案: