Question

我试图将两个输入字段的输入值的数量限制为三个。例如{。{1}}，或者如果一个输入中的值达到3，则用户将无法添加更多..还有其他类似的问题，但它们通常仅适用于1个输入字段。我要限制组合字段。

我尝试了以下代码，但它似乎并没有按照我想要的方式进行响应..它不会将值总计为3。它在浏览器中执行此操作，但是当我查看控制台时，它仍然继续。

input 1 = 1, input 2 = 2. so, 1+ 2 = 3 or 2 + 1= 3

$('.qty_pack').change(function() {
  var i = 0;
  if (i >= 3) {
    $(this).parent().find('.qty_pack').val(0);
    console.log('You have reached max items');
  }
  $('.check_sales_pack').each(function() {
    i += parseFloat($(this).parent().find('.qty_pack').val())
  });
  console.log(i);
});

Answer 1

检查i > 3后是否遍历输入并添加到i。另外，使用选择器.qty_pack选择输入：

$('.qty_pack').change(function(e) {
  let count = 0;
  $('.qty_pack').each(function() {
    count += parseFloat(this.value);
  });
  console.log('Total:', count);
  if (count > 3) {
    // Reset the *most recently changed* input to 0:
    e.target.value = 0;
    console.log('You have reached max items');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="hidden" class="check_sales_pack" name="check_sales_pack">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
</div>

请记住，如果计算出的计数正确，则当数据发送到服务器时，也应在服务器上进行验证-无法信任在客户端运行的代码，因为客户端可以运行（和猴子补丁）他们想要的任何代码。

Answer 2

function sum() {
            var txtFirstNumberValue = document.getElementById('txt1').value;
            var txtSecondNumberValue = document.getElementById('txt2').value;
            var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);


            if (!isNaN(result)) {
                document.getElementById('txt3').value = result;
            }
            if(txtFirstNumberValue  > 3 ||txtSecondNumberValue >3 || result > 3){
    document.getElementById('txt1').value = 0;
    document.getElementById('txt2').value =0;
    document.getElementById('txt3').value = 0;
        }
        }
        
function check(){

var txtFirstNumberValue = document.getElementById('txt1').value;
            var txtSecondNumberValue = document.getElementById('txt2').value;
            if(txtFirstNumberValue  > 3 ||
txtSecondNumberValue >3 ){
document.getElementById('txt1').value = 0;
document.getElementById('txt2').value =0;
document.getElementById('txt3').value = 0;
}
}

<!DOCTYPE html>
<html>
<body>

<form action="">
  
  <input type="number" id="txt1"  min="0" max="3" onkeyup="check();" />
<input type="number" id="txt2"  min="0" max="3"  onkeyup="check();" />
<input type="submit" onclick="sum();"/>
<input type="number"  min="1" max="3" id="txt3" />



</form>



</body>
</html>

如何在输入字段中将数字限制为总共3个？

2 个答案: