javascript - 不要让在输入中写入大于 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 .