不要让在输入中写入大于 max 属性的数字

Question

document.querySelector("#maca").addEventListener("keydown", function(e) {
if (e.target.value > this.getAttribute("max")) {
e.preventDefault();
}
})

<input type="text" name="maca" placeholder="maca" id="maca" max="7">

我试图阻止用户输入大于max属性值的数字。发生的情况是，首先允许用户写一个更大的数字，然后不允许。

我该如何解决这个问题?

非常感谢!

Answer 1

这比它看起来更棘手，因为即使<input type="number" max="7"/>允许您输入9而没有抱怨(我认为应该抱怨并阻止输入，但出于某种原因没有)。在下面的示例

<input type="number" max="7"/>

我想出了这个小JS解决方案:

const max = +maca.getAttribute("max");
maca.addEventListener("keydown", function(e) {
const typed = +e.key;

if(!isNaN(typed)) e.preventDefault(); // Allow any non-number keys (backspace etc.)

if ( +(e.target.value + typed) <= max) {
maca.value += typed
} else {
console.log(`Number too big! Max is ${max}`)
}
})

<input type="number" name="maca" placeholder="maca" id="maca" max="7">

这确实不允许用户输入8或9。此外，您可以输入1，但不能在11中添加另一个数字。