React中如何实现输入框仅允许输入1-24数值并禁用其他按键

要实现输入框仅接受1-24范围数值、拦截非法按键，不能只依赖按键事件，需要结合按键前置拦截+输入值兜底校验两层逻辑，同时兼容正常编辑操作、粘贴/自动填充等非按键输入场景。

核心实现逻辑 #

1. onKeyDown 按键拦截逻辑 #

负责拦截明确的非法按键，同时保留正常编辑能力：

• 放行常用控制键：退格、删除、方向键、Tab、回车等
• 放行通用编辑快捷键：Ctrl/Cmd + A（全选）、C（复制）、V（粘贴）、X（剪切）
• 拦截所有非数字按键
• 预判输入后的新值，提前拦截会导致超出范围、开头为0的非法输入

const onKeyDown = (e) => {
  // 放行的控制键列表
  const allowedControlKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight']
  // 放行编辑快捷键
  if ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) {
    return
  }
  if (allowedControlKeys.includes(e.key)) return

  // 拦截非数字按键
  if (!/^[0-9]$/.test(e.key)) {
    e.preventDefault()
    return
  }

  // 预判输入后的完整值
  const input = e.target
  const { value, selectionStart, selectionEnd } = input
  const newValue = value.slice(0, selectionStart) + e.key + value.slice(selectionEnd)

  // 拦截非法预判值：0开头、数值超过24、长度超过2位
  if (newValue.startsWith('0') || Number(newValue) > 24 || newValue.length > 2) {
    e.preventDefault()
  }
}

2. onChange 兜底校验逻辑 #

onKeyDown无法拦截右键粘贴、浏览器自动填充、脚本赋值等场景，需要在值变化时做二次校验：

// 注意需要先在组件内维护输入值state
const [checkinHours, setCheckinHours] = useState('')

const onChangeHandler = (e) => {
  let inputVal = e.target.value
  // 允许清空输入的场景
  if (inputVal === '') {
    setCheckinHours('')
    return
  }
  // 过滤所有非数字字符
  inputVal = inputVal.replace(/[^0-9]/g, '')
  // 去除开头多余的0
  inputVal = inputVal.replace(/^0+/, '')
  // 超过最大值24直接截断为24
  if (Number(inputVal) > 24) inputVal = '24'
  setCheckinHours(inputVal)
}

3. 自定义输入框组件配置调整 #

修正原代码的value绑定、长度限制，补充原生范围属性做兼容：

<TextFieldCustom
  placeholder="Enter checkin hours"
  value={checkinHours}
  onChange={onChangeHandler}
  maxLength={2}
  type="number"
  onKeyDown={onKeyDown}
  min={1}
  max={24}
/>

可选补充：失焦校验 #

如果需要避免用户输入中途值（比如只输入了"2"就失焦）不符合要求，可以额外加onBlur事件做最终校验，自动纠正值或者触发错误提示：

const onBlur = (e) => {
  const val = Number(e.target.value)
  // 值小于1时可根据业务需求重置为1/清空/提示错误
  if (!val || val < 1) {
    setCheckinHours('1')
  }
}

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