Question

所以我正在研究一个学校项目的计算器，我的想法是你可以输入数字并自动产生价格。当我使用滑块时它工作正常，但我希望能够输入你自己的数字。

如果没有提交按钮，则如果didgits超过最大值和最小值，我怎么能让计算器检查表格。就像我将max设置为200一样，那么你必须无法填写230例如。它适用于箭头按钮，但当你自己填写时，你可以填写你想要的任何东西。

需要以某种方式进行检查，但我不知道怎么做，看看代码。

  $(".priceslider").change(function () {

      var width = $("#width").val();
      var height = $("#height").val();
      var number = $("#number").val();

      var sale = (110 - (10 * number)) / 100;

      var pricex = ((width * height / 100) * sale) * number;

      if (pricex < 30) {
            var price = 30;
      } else {
            var price = pricex;
      }

      $("#txtWidth").text(width + ' cm');
      $("#txtHeight").text(height + ' cm');
      $("#txtNumber").text(number + ' st');
      $("#txtPrice").text('$' + price.toFixed(0));
  });

Answer 1

您需要手动限制越界值，如下所示：

<强>脚本：

if (parseInt($(this).val()) > parseInt($(this).attr("max"))) {
     $(this).val($(this).attr("max"));
} else if (parseInt($(this).val()) < parseInt($(this).attr("min"))) {
     $(this).val($(this).attr("min"));
}

Working Demo

Answer 2

检查更改事件中的最大值。如果有溢出，请删除最后一个数字

 <body>

<div>
    <label id="lblBreedte">Breedte:</label>
    <input class="prijsslider" type="number" id="sliBreedte" value="30" min="30" max="200" />
    <label id="txtBreedte">30 cm</label>
</div>
<div>
    <label id="lblHoogte">Hoogte:</label>
    <input class="prijsslider" type="number" id="sliHoogte" value="61" min="61" max="134" />
    <label id="txtHoogte">61 cm</label>
</div>
<div>
    <label id="lblAantal">Aantal:</label>
    <input class="prijsslider" type="number" id="sliAantal" value="1" min="1" max="4" />
    <label id="txtAantal">1 st</label>
</div>
<hr />
<div>
    <label id="lblPrijs">Prijs:</label>
    <label id="txtPrijs">€30</label>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(".prijsslider").change(function () {

      if (parseInt($(this).val()) > parseInt($(this).attr("max"))) {

         $(this).val($(this).val().substr(0, strlen($(this).val()) - 1));

      }

      var breedte = $("#sliBreedte").val();
      var hoogte = $("#sliHoogte").val();
      var aantal = $("#sliAantal").val();

      var korting = (110 - (10 * aantal)) / 100;

      var prijsx = ((breedte * hoogte / 100) * korting) * aantal;

      if (prijsx < 30) {
            var prijs = 30;
      } else {
            var prijs = prijsx;
      }

      $("#txtBreedte").text(breedte + ' cm');
      $("#txtHoogte").text(hoogte + ' cm');
      $("#txtAantal").text(aantal + ' st');
      $("#txtPrijs").text('€' + prijs.toFixed(0));
  });
</script>

</body>

计算器的最小值和最大值，无需提交

2 个答案: