如何阻止用户在number类型输入框中输入超出最大值的数字

原生的type="number"输入框仅通过上下箭头限制min和max范围，但用户手动输入时可以突破这个限制。readonly或disabled会直接禁用交互，显然不符合需求。下面提供两种简单的JavaScript方案，无需你懂JS，直接复制就能用：

方案一：实时校验并修正输入值 #

当用户手动输入、粘贴内容时，立刻检查值是否在范围内，超出则自动修正：

<input type='number' id='quantity' name='quantity' min='0' max='<?php echo $the_quantity_required; ?>'>

<script>
// 获取你的输入框元素
const quantityInput = document.getElementById('quantity');

// 监听输入事件，实时处理
quantityInput.addEventListener('input', function() {
  // 从输入框属性读取预设的最小/最大值
  const minVal = parseFloat(this.min);
  const maxVal = parseFloat(this.max);
  // 把当前输入的内容转为数字
  let inputVal = parseFloat(this.value);

  // 校验逻辑：超出范围就修正，非数字重置为最小值
  if (inputVal < minVal) {
    this.value = minVal;
  } else if (inputVal > maxVal) {
    this.value = maxVal;
  } else if (isNaN(inputVal)) {
    this.value = minVal;
  }
});
</script>

方案二：失去焦点时校验修正 #

如果不想实时打断用户输入，可以在用户点击输入框外部（失去焦点）时再修正值：

<input type='number' id='quantity' name='quantity' min='0' max='<?php echo $the_quantity_required; ?>'>

<script>
const quantityInput = document.getElementById('quantity');

// 监听失去焦点事件
quantityInput.addEventListener('blur', function() {
  const minVal = parseFloat(this.min);
  const maxVal = parseFloat(this.max);
  let inputVal = parseFloat(this.value);

  if (inputVal < minVal) {
    this.value = minVal;
  } else if (inputVal > maxVal) {
    this.value = maxVal;
  } else if (isNaN(inputVal)) {
    this.value = minVal;
  }
});
</script>

适配动态最大值 #

你的max是由变量$the_quantity_required生成的，直接保留原代码的max='$the_quantity_required'写法即可，上面的JS会自动读取输入框的max属性值，无需修改JS代码。

内容的提问来源于stack exchange，提问作者DaveO