如何用JS限制HTML number输入框仅输入1-100数字 禁止输入字母

你写的非数字判断逻辑不生效的核心原因有两个：

• 当输入值是字母等非数字内容时，parseInt(el.value) 会返回NaN
• JavaScript中NaN的类型判定结果本身就是number，即typeof NaN === 'number'返回true，所以你写的类型判断分支永远不会触发。

另外原生type="number"输入框本身只在表单提交时做合法性校验，允许用户输入过程中临时键入非数字字符，仅靠keyup触发的事后赋值会出现非数字内容闪一下再被替换的体验问题。

做两层处理：第一层在按键输入阶段直接拦截非法字符，避免输入闪烁；第二层在输入完成、失焦时做合法性和范围兜底校验，防止粘贴等操作绕过拦截，最终实现仅支持输入1-100范围内整数的效果。

修正后的完整代码 #

JS逻辑 #

const enforceValidRange = (el) => {
  if (!el.value) return;
  const val = parseInt(el.value);
  const min = parseInt(el.min);
  const max = parseInt(el.max);
  // 先判断是否为有效数字，非法输入直接重置为最小值
  if (isNaN(val)) {
    el.value = min;
    return;
  }
  // 再做范围边界校验
  if (val < min) el.value = min;
  if (val > max) el.value = max;
}

// 按键阶段拦截非法输入，避免非数字内容出现在输入框中
const blockInvalidInput = (e) => {
  // 放行常用控制类按键：退格、删除、方向键、tab、回车等
  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab', 'Enter', 'Delete'];
  if (allowedKeys.includes(e.key)) return;
  // 非数字按键直接阻止输入
  if (!/^\d$/.test(e.key)) {
    e.preventDefault();
  }
}

HTML代码 #

<input 
  type="number" 
  id="quantity" 
  name="quantity" 
  min="1" 
  max="100" 
  step="1"
  onkeydown="blockInvalidInput(event)"
  onkeyup="enforceValidRange(this)"
  onblur="enforceValidRange(this)"
>

逻辑说明 #

• 输入拦截层：在keydown阶段直接拦截非数字按键，用户按字母、符号时内容不会出现在输入框里，没有闪烁问题，同时保留了正常编辑需要的控制按键，不影响使用体验。
• 兜底校验层：修正了原代码的判断错误，用isNaN()识别解析失败的非数字输入，先处理非法值重置，再做1-100的范围判断；额外绑定blur事件，覆盖鼠标粘贴、拖拽填充等绕过按键拦截的场景，保证输入框最终值一定符合要求。

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