我有这三个数字类型的输入，您只能添加一个数字，并且可以通过按 0 到 9 之间的任何其他数字来替换它。我在这些输入上有 2 个事件侦听器，第一个是能够更改通过按 0 到 9 之间的数字（使用“keyup”）进行输入。
第二个事件侦听器用于检测输入，然后计算三个输入的总和，当计算出正确的总和时，会引发警报。我注意到，如果我想要总共 27 个，例如我需要在输入中添加 9 + 9 + 9。
但是，如果我添加 9 + 8 + 9，但没有删除 8，只是按 9 替换它，我就不会收到警报。为了获得更好的总数，似乎可以在事件侦听器中使用“keyup”来完成此操作。
那么这是为什么呢？当按下9按钮时它仍然是一个输入事件？
const element1 = document.querySelector('.element1')
let total = 0
let desiredTotal = 27
let allInputs = Array.from(element1.getElementsByTagName('input'))
allInputs.forEach((input)=>{
input.style.border = '2px solid blue'
input.addEventListener('keyup', (e)=>{
if(e.target.value.length === 1 && parseFloat(e.key) >= 0 && parseFloat(e.key) <=9){
e.target.value = e.key
}
})
})
allInputs.forEach((input)=>{
let value
input.addEventListener('input', (e)=>{
let value = parseFloat(input.value)
total += value
console.log(total)
if(total === 27) alert('you won!')
})
})input{
width: 2ch;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
appearance: textfield;
}<body>
<div class="element1">
<input type="number" name="" id="input1" onKeyPress="if(this.value.length===1 || event.key == 'e') {return false}">
<input type="number" name="" id="input2" onKeyPress="if(this.value.length===1 || event.key == 'e') {return false}">
<input type="number" name="" id="input3"onKeyPress="if(this.value.length===1 || event.key == 'e') {return false}">
</div>
<p>Try to obtain a total of 27</p>
<p>Try to place 9 9 and then 9 you get the alert</p>
<p>Try to place 9 6 and then 9 but then change(without deleting) but pressing on the 6 containing input the number 9 you won't get the alert</p>
</body>不要混合使用 HTML 输入 onKeyPress 和 JS EventListener。
一切都用 JS 完成
document.querySelectorAll('.element1 input').forEach( (inElm,_,All) =>
{
inElm.addEventListener('keydown', e =>
{
if ( /\d/.test(e.key) ) e.target.value = e.key; // accept only digitals
if (e.key !== 'Tab') e.preventDefault(); // do ignore input event
let Total = 0;
All.forEach( inN => Total += inN.valueAsNumber );
console.clear();
console.log( 'Total', Total );
});
});input[type="number"] {
width : 2ch;
border : 2px solid blue;
text-align : center;
margin : .5em;
appearance : textfield;
}<div class="element1">
<input type="number" value="0" >
<input type="number" value="0" >
<input type="number" value="0" >
</div>
<p>Try to obtain a total of 27</p>