Question

我有3个input字段，我想彼此连接/链接。我希望它们的总价值限制为100％。因此，如果1个输入为40％，则另外2个input剩下60％的值可以分配。

我正在尝试在Google上找到答案，但是我认为搜索条件不正确。有人知道如何执行此操作，或者是否有如何执行操作的指南？

<div class="form_groep">
  <label class="input_label_koolhydraten"><b>Koolhydraten</b></label>
  <input class="input_macro_koolhydraten" type="number" name="message" id="macro_koolhyrdaten" required><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_eiwitten"><b>Eiwitten</b></label>
  <input class="input_macro_eiwitten" type="number" name="message" id="macro_eiwitten" required><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_vetten"><b>Vetten</b></label>
  <input class="input_macro_vetten" type="number" name="message" id="macro_vetten" required><span>%</span><br><br>
</div>

Answer 1

您可以监听js中所有这些输入的change或input事件，然后从所有值中获取值，计算它们的长度，如果sum_of_their_lengths > some_maximum_value然后阻止它们。

Answer 2

如果我理解正确，您希望输入3个值的总和不超过100，对吧？
如果是，那么下面的代码可以为您提供帮助。在那里，您将获得数组中的所有输入，然后将侦听器添加到每个输入的更改中。该侦听器将获取正在更改的input的值，并检查其值与其他值的总和是否不超过100。

检查代码，如果您不懂，请在注释中注明。另外，如果我理解您有误，请警告我。

let total = 0;
const ipts = Array.from(document.getElementsByTagName('input'));
const totalElem = document.getElementById("total")

for (var i = 0; i < ipts.length; i++){
  ipts[i].onchange = countTotal
}

function countTotal(){
  let value = parseFloat(this.value);
  total = ipts.reduce((counter,elem) => parseFloat(elem.value) + counter, 0);
  total -= value;
  if (value > 100){
    this.value = 100;
  }
  if (value + total > 100){
    this.value = 100 - total;
  }  
  totalElem.innerText = total + parseFloat(this.value);
}

<div class="form_groep">
  <label class="input_label_koolhydraten"><b>Koolhydraten</b></label>
  <input class="input_macro_koolhydraten" type="number" name="message" id="macro_koolhyrdaten" required value='0'><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_eiwitten"><b>Eiwitten</b></label>
  <input class="input_macro_eiwitten" type="number" name="message" id="macro_eiwitten" required value='0'><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_vetten"><b>Vetten</b></label>
  <input class="input_macro_vetten" type="number" name="message" id="macro_vetten" required value='0'><span>%</span><br><br>
</div>
<div><span id="total">0</span> out of 100% </div>

有没有一种方法可以将输入连接在一起？

2 个答案: