type为number的input无法阻止用户输入超出min、max范围的值

HTML 原生的type="number"输入框的min和max属性仅作用于两个场景：一是控制输入框侧边上下箭头点击时的步进范围，二是表单原生提交时的自动校验，不会限制用户手动键盘输入超出范围的数值，React 中直接使用这两个属性调用的是原生能力，因此也存在同样的问题。

以下是三种常用的修复方案，可根据业务场景选择：

• 方案1：表单提交时统一校验
  提交前读取输入框的值做范围判断，不符合要求时弹出提示并阻止提交即可，适合对实时校验要求不高的场景。
  示例代码：

  const handleSubmit = (e) => {
    e.preventDefault()
    const inputCost = Number(e.target.cost.value)
    if (inputCost < 0 || inputCost > 1000000) {
      alert('请输入0到1000000之间的数值')
      return
    }
    // 后续正常提交逻辑
  }
  

• 方案2：输入时实时拦截非法内容
  给输入框绑定onChange事件，输入过程中直接过滤不符合规则的内容，用户无法输入范围外的数值，体验更好。
  示例代码：

  import { useState } from 'react'
  
  // 组件内逻辑
  const [cost, setCost] = useState('')
  
  const handleCostChange = (e) => {
    const inputValue = e.target.value
    // 仅允许输入数字，兼容用户删除内容时空值的场景
    if (/^\d*$/.test(inputValue)) {
      const numValue = Number(inputValue)
      if (numValue <= 1000000) {
        setCost(inputValue)
      }
    }
  }
  
  // 修改后的输入框代码
  <input
    className="input cost-input"
    type="number"
    id="cost"
    name="cost"
    min={0}
    max={1000000}
    placeholder="$"
    value={cost}
    onChange={handleCostChange}
  />
  

• 方案3：利用原生validity属性自动修正
  绑定onInput事件，通过原生输入框的validity属性判断是否超出范围，自动修正为边界值。
  示例代码：

  const handleInput = (e) => {
    // 小于最小值时自动修正为0
    if (e.target.validity.rangeUnderflow) {
      e.target.value = 0
    }
    // 大于最大值时自动修正为1000000
    if (e.target.validity.rangeOverflow) {
      e.target.value = 1000000
    }
  }
  
  // 输入框新增onInput绑定
  <input
    className="input cost-input"
    type="number"
    id="cost"
    name="cost"
    min={0}
    max={1000000}
    placeholder="$"
    onInput={handleInput}
  />
  

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture