javascript - 4个百分比输入框，如何动态调整数值，最高可达100%

Question

我想向用户展示四个输入框，从每个输入框的 25% 开始。如果用户更改输入框中的任何值，则其他三个框中显示的值将进行相应计算。示例:假设用户选择将其中一个主题更改为 20%，我预计其他主题为 26.6

Answer 1

您可以首先获取所有元素，然后在 focus 上添加一个类，在 blur 上删除它。此类将用于定位元素的其余部分并更新它们的值

//get all the input with specified name and add event lister to it
[...document.getElementsByName('userInp')].forEach(function(item) {
  // on focusing adding a class to the current target
  item.addEventListener("focus", function(e) {
    e.target.classList.add('focus')

  });
  // removing the class on blurring from current target
  item.addEventListener("blur", function(e) {
    e.target.classList.remove('focus')

  });
  item.addEventListener('keyup', function(e) {
    // get the value from the target input
    let getVal = e.target.value;
    if (getVal < 100) {
      // devide equally among rest of the inputs for this example it is 3
      let eachVal = (100 - getVal) / 3
      // then select all the input which does not have class focus
      // and update their value
      document.querySelectorAll("input:not(.focus)").forEach(function(elem) {
        elem.value = eachVal.toFixed(2)
      })

    }


  })
})

<input type='text' name='userInp' value='25'>
<input type='text' name='userInp' value='25'>
<input type='text' name='userInp' value='25'>
<input type='text' name='userInp' value='25'>