javascript - 如果一定数量的数字已经有值，则阻止用户在输入字段中输入数字

Question

我目前正在开发费用计算器。以下是我正在研究的部分的规则:

• 有 9 个数字输入字段，A 到 I
• 输入字段 D、E 和 F 为必填字段。用户必须在至少这3个输入框中的1个中输入一个数字(大于0)(我已经处理了这方面的问题)
• 用户最多只能在 9 个输入中的 6 个输入中输入数字(大于 0，无限制)

我已经通过这个应用程序实现了一些目标，我在页面上有几个复选框，用户必须选择至少 1 个，最多 5 个。一旦用户选中其中 5 个框，他们就无法选中第 6 个框。如果他们取消选中 5 项中的一项，则可以重新检查另一项。

因此，我希望通过这些数字输入达到类似的效果。

一旦用户在 9 个输入字段中的最多 6 个输入字段中输入了数字(同样大于 0)，他们就无法在剩余 3 个输入字段之一中输入任何内容。但如果他们要从 6 个字段之一中删除输入，他们应该能够在其他 4 个输入之一中输入数字，因为现在只有 5 个字段输入了内容。同样，这个数字可以是大于 0 的任何值。它可以是 10、10,000 或 100,000 等。输入的总值并不重要，重要的是您在 9 个输入中输入了多少个值(同样最多 6 个)最大)。

我不是在寻求有关计算本身的帮助，也不是在寻求有关复选框的帮助。我只是想获得有关上段中提到的功能的一些帮助。

此外，这必须使用普通的 JavaScript 来完成，不能使用 jQuery。

任何帮助找到这个解决方案的人将不胜感激!谢谢!

这是HTML:

<div>
    <div>
      <label for="Input A">Input A</label>
      <input class="entity-input license-input" type="number" name="Input A" value="0" min="0">
    </div>
    <div>
      <label for="Input B">Input B</label>
      <input class="entity-input license-input" type="number" name="Input B" value="0" min="0">
    </div>
    <div>
      <label for="Input C">Input C</label>
      <input class="entity-input license-input" type="number" name="Input C" value="0" min="0">
    </div>
    <div>
      <label for="Input D">Input D</label>
      <input class="entity-input license-input-mandatory" type="number" name="Input D" value="0" min="0">
    </div>
    <div>
      <label for="Input E">Input E</label>
      <input class="entity-input license-input-mandatory" type="number" name="Input E" value="0" min="0">
    </div>
    <div>
      <label for="Input F">Input F</label>
      <input class="entity-input license-input-mandatory" type="number" name="Input F" value="0" min="0">
    </div>
    <div>
      <label for="Input G">Input G</label>
      <input class="entity-input distribution-input" type="number" name="Input G" value="0" min="0">
    </div>
    <div>
      <label for="Input H">Input H</label>
      <input class="entity-input distribution-input" type="number" name="Input H" value="0" min="0">
    </div>
    <div>
      <label for="Input I">Input I</label>
      <input class="entity-input distribution-input" type="number" name="Input I" value="0" min="0">
    </div>
  </div>

这是我到目前为止的JavaScript:

// Select all elements with class of entity-input
const ENTITY_INPUTS = document.querySelectorAll('.entity-input');

// Prevent user from entering a number on 7th number input (cannot fill in more than 6)
ENTITY_INPUTS.forEach((input) => {
  const MAX = 6;

  // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
  input.addEventListener('blur', () => {
    if (input.value == 0) {
      input.removeAttribute('data-changed', 'true');
      input.setAttribute('data-changed', 'false');
    } else if (input.value !== 0) {
      input.removeAttribute('data-changed', 'false');
      input.setAttribute('data-changed', 'true');
    }

    let unchangedInputs = document.querySelectorAll('[data-changed="false"]');
    if (unchangedInputs.length !== []) {
      console.log(`The number of inputs with a value still at zero is ${unchangedInputs.length}`);
    }
  });

  // Count the number of inputs with data-changed set to true - can't be more than 6
  input.addEventListener('focus', () => {
    let changedInputs = document.querySelectorAll('[data-changed="true"]');
    console.log(`The number of inputs with a value more than zero is ${changedInputs.length}`);

    if (changedInputs.length == MAX && input.value > 0) {
      console.log(`You may change this element`);
    } else if (changedInputs.length == MAX) {
      console.log(`You can't enter any more numbers!`);
    }
  });
});

编辑:在对 HTML 和 JS 进行一些轻微修改后，我能够解决这个问题。

默认情况下，我为所有 9 个输入赋予了属性 data-changed="false"，而不是根据用户输入动态分配它。与 @7iiBob 的答案类似，我将所有内容都放入 blur 中，并得到了我需要的效果:

   ENTITY_INPUTS.forEach((input) => {
      const REMAINING_INPUTS = 3;

      // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
      input.addEventListener('blur', () => {
        if (input.value == 0) {
          input.removeAttribute('data-changed', 'true');
          input.setAttribute('data-changed', 'false');
        } else if (input.value !== 0) {
          input.removeAttribute('data-changed', 'false');
          input.setAttribute('data-changed', 'true');
        }

        // upon leaving, check number of elements still with data-changed set to false
        // if the number of elements is equal to 3, set them to disabled
        // else, leave them alone (set disabled to false)
        let unchangedInputs = document.querySelectorAll('[data-changed="false"]');

        if (unchangedInputs.length == REMAINING_INPUTS) {
          unchangedInputs.forEach((input) => {
            input.disabled = true;
          });
        } else {
          unchangedInputs.forEach((input) => {
            input.disabled = false;
          });
        }
      });
    });

Answer 1

你看起来已经非常接近解决这个问题了。

为什么不将所有内容都放入模糊中？

// Select all elements with class of entity-input
const ENTITY_INPUTS = document.querySelectorAll('.entity-input');

// Prevent user from entering a number on 7th number input (cannot fill in more than 6)
ENTITY_INPUTS.forEach(input => {
  const MAX = 6;

  // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
  input.addEventListener('blur', () => {
    if (input.value == 0) {
      input.removeAttribute('data-changed', 'true');
      input.setAttribute('data-changed', 'false');
    } else if (input.value !== 0) {
      input.removeAttribute('data-changed', 'false');
      input.setAttribute('data-changed', 'true');
    }

    let changedInputs = document.querySelectorAll('[data-changed="true"]');
    let unchangedInputs = document.querySelectorAll('[data-changed="false"]');

    if (changedInputs.length == MAX) {
      unchangedInputs.forEach(inputToDisable =>
        inputToDisable.setAttribute('disabled', 'true')
      );
    } else if (changedInputs.length < MAX) {
      unchangedInputs.forEach(inputToEnable =>
        inputToEnable.setAttribute('disabled', 'false')
      );
    }
  });
});