不要让在输入中写入大于 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，但无法在 type 中添加其他数字11。