javascript - 如果聚合 JavaScript 函数变为负数，则停止更改数字输入

Question

我有一个 JavaScript 函数，它计算大量默认数字输入的总和，它提供一个我设置为 0 的总值。如果输入增加 5，那么我的总值将变为 -5，反之亦然用于减法。我想要的是，当用户想要增加输入的值时，他们必须首先减少另一个输入的值。我的问题是，如果这会导致总值(value)为负值，我该如何阻止输入值的增加？这是一个 fiddle ，我的代码如下:

$(document).ready(function() {
  calculateSum(); //call the function here
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).keyup(function() {
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 309;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum -= parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

body {
  font-family: sans-serif;
}

#summation {
  font-size: 18px;
  font-weight: bold;
  color: #174C68;
}

.txt {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32" /></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47" /></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31" /></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69" /></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65" /></td>
  </tr>
  <tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
  </tr>
</table>

最好，解决方案会阻止输入被更改，并在可能的情况下显示错误消息。抱歉，如果这看起来很基础，我才刚刚开始使用 JS，不知道从哪里开始实现我想要的。

Answer 1

使用 blur将在用户离开输入时触发检查 - 通过跳出或单击另一个输入/单击按钮。

您可以存储“当前”值，然后在模糊处理程序中检查总和是否变为 <0使用新值 - 如果是，您可以从商店恢复旧值。

更新的片段:

$(document).ready(function() {
  updateSum(calculateSum());

  $(".txt").each(function() {
    $(this).data("oldvalue", $(this).val());
  });

  $(".txt").on("blur", function() {
    var sum = calculateSum();
    if (sum < 0) {
      $(this).val($(this).data("oldvalue"));
      // show warning here, maybe highlight the dodgy input by setting background-colour etc (in a nice way, example here only)
      $("#warning").fadeIn().delay(3000).fadeOut();
      $(this).addClass("warning");
      var inp = $(this);
      setTimeout(function() { inp.removeClass("warning") }, 1000);
    } else {
      $(this).data("oldvalue", $(this).val());
      updateSum(sum);
    }
  });
});

function calculateSum() {

  var sum = 309;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum -= parseFloat(this.value);
    }

  });

  return sum;
}

function updateSum(sum) {
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

body {
  font-family: sans-serif;
}

#summation {
  font-size: 18px;
  font-weight: bold;
  color: #174C68;
}

.txt {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

#warning { color: red; }
.txt.warning { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32" /></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47" /></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31" /></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69" /></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65" /></td>
  </tr>
  <tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
  </tr>
  <tr>
    <td colspan=3>
      <span id='warning' style='display:none;'>
          Please enter correct values
      </span>
    </td>
</table>