防止用户在输入字段中输入数字(如果其中某个数字已具有值)

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

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

为什么不把所有东西都放进blur？

// 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')
);
}
});
});

Answer 2

这是逻辑。

植入复选框：

let inputCheckboxesLength = 0; // initial counter to 0
const inputCheckboxes = document.querySelectorAll('#inputCheck input'); // target the checkboxes
for (var i=0; i < inputCheckboxes.length; i++) { // iterate checkboxes
inputCheckboxes[i].addEventListener('change', function() { // listen to changne event:
if (this.checked) { // if one of the checkboxes selected:
++inputCheckboxesLength; // increase the count
if (inputCheckboxesLength === 6) { // if the count more then 5 (equal to 6)
alert ('You cannot check more then 5 checkboxes!'); // alert error message 
inputCheckboxesLength = 5; // change the count back to 5
this.checked = false; // remove the checked for the last checkbox
}
}    
else {  
--inputCheckboxesLength // decrease the count - will tirgger when user remove check-mark from checkbox
} 
});
}

<fieldset id="inputCheck">
<label for="check1">1<input type="checkbox" id="check1" /></label>
<label for="check2">2<input type="checkbox" id="check2" /></label>
<label for="check3">3<input type="checkbox" id="check3" /></label>
<label for="check4">4<input type="checkbox" id="check4" /></label>
<label for="check5">5<input type="checkbox" id="check5" /></label>
<label for="check6">6<input type="checkbox" id="check6" /></label>
<label for="check7">7<input type="checkbox" id="check7" /></label>
<label for="check8">8<input type="checkbox" id="check8" /></label>
</fieldset>

植入输入：

let inputNumberLength = 0; // initial counter to 0
const inputNumbers = document.querySelectorAll('#inputNumber input'); // target the inputs
for (var i=0; i < inputNumbers.length; i++) { // iterate inputs
inputNumbers[i].addEventListener('change', function() { // listen to changne event:
if (this.value.length > 0) {
++inputNumberLength; // increase the count
if (inputNumberLength === 6) { // if the count more then 5 (equal to 6)
alert ('You cannot put more then 5 values!'); // alert error message 
inputNumberLength = 5; // change the count back to 5
this.value = ''; // remove the value for the last input
}
}    
else {  
--inputNumberLength // decrease the count - will tirgger when user remove check-mark from checkbox
} 
});
}

<fieldset id="inputNumber">
<label for="a"><input type="number" id="a" /></label>
<label for="b"><input type="number" id="b" /></label>
<label for="c"><input type="number" id="c" /></label>
<label for="d"><input type="number" id="d" /></label>
<label for="e"><input type="number" id="e" /></label>
<label for="f"><input type="number" id="f" /></label>
<label for="g"><input type="number" id="g" /></label>
<label for="h"><input type="number" id="h" /></label>
<label for="i"><input type="number" id="i" /></label>
</fieldset>