一起设置三个输入数字的最大值答案

【问题标题】：Set max value of three input numbers together一起设置三个输入数字的最大值
【发布时间】：2018-04-04 07:08:17
【问题描述】：

我有三个输入数字：

<input min="0" name="cat1" step="1" type="number" max="50" value="0" />            
<input min="0" name="cat2" step="1" type="number" max="50" value="0" />
<input min="0" name="cat3" step="1" type="number" max="50" value="0" />

目前最大值为 50。我希望所有三个加起来的最大值也为 50。

如何使用 javascript 或 jquery 解决这个问题？

【问题讨论】：

I would like the max for all three together to be 50 aswell 什么？
我相信 TS 意味着所有三个加起来的 sum 也不应该超过 50。

标签： javascript jquery html input numbers

【解决方案1】：

此方法对其他输入求和，如果和+当前值大于最大值，则将当前输入的值更改为适合最大值。

例如，尝试在输入框中输入 30、5、20。

var max = 50;
var $inputs = $('input');

function sumInputs($inputs) {
  var sum = 0;
  
  $inputs.each(function() {
    sum += parseInt($(this).val(), 0);
  });

  return sum;
}

$inputs.on('input', function(e) {
  var $this = $(this);
  var sum = sumInputs($inputs.not(function(i, el) {
    return el === e.target;
  }));
  var value = parseInt($this.val(), 10) || 0;
  if(sum + value > max) $this.val(max - sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="0" name="cat1" step="1" type="number" max="50" value="0" />
<input min="0" name="cat2" step="1" type="number" max="50" value="0" />
<input min="0" name="cat3" step="1" type="number" max="50" value="0" />

【讨论】：

【解决方案2】：

希望您会这样。 尝试使用此代码。 它将检查三个字段的聚合并检查它是否大于50。

$(":input").bind('keyup mouseup', function () {          

  var cat1=$("#cat1").val();
  var cat2=$("#cat2").val();
  var cat3=$("#cat3").val();
  var total=parseInt(cat1) + parseInt(cat2) + parseInt(cat3);
 
  if(total>50) {
    alert("it exceeds 50");
    return false;
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="0" id="cat1"  name="cat1" step="1" type="number" max="50" value="0" />            
<input min="0" id="cat2"  name="cat2" step="1" type="number" max="50" value="0" />
<input min="0" id="cat3"  name="cat3" step="1" type="number" max="50" value="0" />

【讨论】：

【解决方案3】：

这将确保总和不超过 50。如果新值使总和超过限制，则其他两个将平均降低以执行总 = 50 规则。

注意

let share2 = Math.min(Math.floor(excessValue / 2), elmt2Value) which ensures

为了确保我们不会从其中一个输入中删除超过其值的内容。

<input min="0" name="cat1" id="cat1" step="1" type="number" max="50" value="0" onchange="valueChanged('cat1')" />            
<input min="0" name="cat2" id="cat2" step="1" type="number" max="50" value="0" onchange="valueChanged('cat2')" />
<input min="0" name="cat3" id="cat3" step="1" type="number" max="50" value="0" onchange="valueChanged('cat3')" />

<script>
     function valueChanged(changedElmtId) {

        // Retrieve all input, the one changed and the other 2
        let elmt2Id = "cat2", elmt3Id = "cat3"
        if ( changedElmtId === elmt2Id ) {
            elmt2Id = "cat1"
        }
        else if ( changedElmtId === elmt3Id ) {
            elmt3Id = "cat1"
        }

        let changedElmt = document.querySelector("#" + changedElmtId)
        let elmt2 = document.querySelector("#" + elmt2Id)
        let elmt3 = document.querySelector("#" + elmt3Id)

        let elmt2Value = parseInt(elmt2.value)
        let elmt3Value = parseInt(elmt3.value)

        // Check if any action is needed
        let totalValue = parseInt(changedElmt.value) + elmt2Value + elmt3Value
        if ( isNaN(totalValue) || totalValue <= 50 )
            return

        // Measure excess then split in 2
        let excessValue = totalValue - 50
        let share2 = Math.min(Math.floor(excessValue / 2), elmt2Value)
        let share3 = excessValue - share2

        console.log("Current:", " " + elmt2Id + ": ", share2, " " + elmt3Id + ": ", share3)
        console.log("Total:", totalValue, " Excess: ", excessValue, " " + elmt2Id + ": ", share2, " " + elmt3Id + ": ", share3)


        elmt2.value = elmt2Value - share2
        elmt3.value = elmt3Value - share3

     }
</script>

【讨论】：

【解决方案4】：

我不知道我的解决方案有多优化，但它确实有效。也涵盖了一些边缘情况。

let inputs = document.querySelectorAll('input');
const max = inputs[0].getAttribute("max");
let value;
inputs.forEach((input, i) => {
  input.addEventListener('change',(e) =>handleChange(e)); // adding change event
  input.addEventListener('blur',(e) =>handleChange(e)); //adding a blur eventto prevent direct  typing of input larger than max
})

const handleChange = (e) =>{  
  if(e.target.value > max - value){
    e.target.value = max-value; //setting max value possible if input value is greater than max
    return;
  }else{
    value = 0;
    inputs.forEach( input => {
      value+=parseInt(input.value); //calculating value to negate from max
    });
    inputs.forEach( input => {
      if(max-value > 0){
       input.setAttribute("max", max-value);  //setting max value on every input
      }    
    }); 
  }     
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input min="0" name="cat1" step="1" type="number" max="50" value="0" />            
  <input min="0" name="cat2" step="1" type="number" max="50" value="0" />
  <input min="0" name="cat3" step="1" type="number" max="50" value="0" />
</body>
</html>

【讨论】：

【解决方案5】：

我希望这对您来说很容易，并且在表单中输入较少数量的情况下也很快速。

$(function(){
  $('input[type=number]').attr('max', '50')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="0" name="cat1" step="1" type="number" value="0" />
<input min="0" name="cat2" step="1" type="number" value="0" />
<input min="0" name="cat3" step="1" type="number" value="0" />

【讨论】：