带有最小值和最大值的输入数值

Question

以下是一个数字输入表单，使用 JavaScript，我添加了一些代码行，最小可输入的数字为1，最大可输入的数字为50。 当有人尝试键入小于1和大于50的任何数字时，它会自动替换为1或50，但我无法成功实现这一点，需要您的帮助。

    document.getElementById('info1').addEventListener("input", function () {
    let num = +this.value, max = 50, min = 1;
    if (num > max || num < min) {
        return false;
      }
})

<input type="number" id="info1" size="4">

- Behar

Answer 1

已经有一个用于此目的的HTML属性对 - min 和 max：

<input type="number" min="1" max="50">

如果您希望在用户输入超出范围的数字时也发生这种情况：

document.getElementById("inp").addEventListener("change", function() {
  let v = parseInt(this.value);
  if (v < 1) this.value = 1;
  if (v > 50) this.value = 50;
});

<input type="number" min="1" max="50" id="inp">

- Jack Bashford

---

是的，我本来想使用这个，但我可以输入一个负数，比如-1，那么它就不是最小值了。 - Behar

当我输入像-1、0等数字时，它仍然保持相同的数字，因此我能够输入负数、小于1和大于50的数字吗？ - Behar

你的代码没有JS代码，所以出现了问题，现在加上JS后它可以工作了，谢谢 :) 还有一个关于负数的问题，比如-1，在你的代码中我没有看到任何针对负数的if语句，如果我输入-1，它会自动替换为1，所以我认为“if (v < 1) this.value = 1; if (v > 50) this.value = 50;”这两行是用来比较负数的，对吗？ - Behar

请查看我的先前评论，如果您能回答那个负数的问题，谢谢 :) - Behar

是的 @Behar - < 1 检查它是否小于最低值 1，如果是，则更新它。它也适用于 0。 - Jack Bashford

Answer 2

function imposeMinMax(el){
  if(el.value != ""){
    if(parseInt(el.value) < parseInt(el.min)){
      el.value = el.min;
    }
    if(parseInt(el.value) > parseInt(el.max)){
      el.value = el.max;
    }
  }
}

<input type=number min=1 max=50 onkeyup=imposeMinMax(this)>

- Umbro