【发布时间】：2020-01-12 22:19:46
【问题描述】：
我目前正在研究费用计算器。以下是我正在处理的部分规则：
- 有 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;
});
}
});
});
【问题讨论】：
标签： javascript html validation input