不要让在输入中写入大于 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 时添加另一个数字。