如何解决Firefox下type=number输入框可输入非数字字符的问题

<input type="number">的输入拦截逻辑没有统一的Web规范约束：Chrome默认在输入阶段直接拦截非数字字符，Firefox仅在表单提交、调用原生校验API时才校验值合法性，不会拦截用户的实时输入。
你之前尝试的方案不生效的核心原因：

• pattern="[0-9]"属性仅在表单原生提交时触发校验，不会拦截用户实时输入
• inputmode="numeric"仅控制移动端弹出的键盘类型，对桌面端输入无拦截作用
• 仅在onChange里校验e.target.value但未做非法值替换、未给输入框绑定受控value属性的话，输入框不会自动清除已经输入的非法字符

方案1：keydown前置拦截+input兜底（推荐，无输入闪烁） #

在keydown事件（输入触发的最早阶段）直接拦截非法按键，再配合input事件兜底处理粘贴、拖拽、输入法输入的非数字内容，全浏览器兼容，不会出现字符闪烁问题，参考实现（React语法，适配你当前的技术栈）：

import { useState } from 'react';

export default function CurrencyInput() {
  const [fromTo, setFromTo] = useState('');

  // 前置拦截键盘输入
  const handleKeyDown = (e) => {
    // 放行基础功能按键：退格、制表、回车、删除、方向键
    const allowedControlKeys = ['Backspace', 'Tab', 'Enter', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
    if (allowedControlKeys.includes(e.key)) return;
    // 放行ctrl/meta组合快捷键：全选、复制、粘贴、剪切
    if ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) return;
    // 拦截非数字、非小数点的按键（如果不需要支持小数，直接去掉小数点的匹配规则即可）
    if (!/^[0-9.]$/.test(e.key)) {
      e.preventDefault();
    }
    // 限制只能输入一个小数点
    if (e.key === '.' && e.target.value.includes('.')) {
      e.preventDefault();
    }
  };

  // 兜底处理粘贴、拖拽、输入法输入的非法内容
  const handleInput = (e) => {
    // 过滤所有非数字、非小数点字符，同时修复重复小数点问题
    const validValue = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    setFromTo(validValue);
    // 同步输入框值，避免光标错位
    if (e.target.value !== validValue) {
      e.target.value = validValue;
    }
  };

  return (
    <input
      type="text"
      inputMode="numeric"
      value={fromTo}
      onKeyDown={handleKeyDown}
      onInput={handleInput}
    />
  );
}

这里把type="number"改成type="text"是为了规避Firefox的已知问题：当type为number的输入框存在非法字符时，e.target.value会返回空字符串，无法正常做值处理；配合inputMode="numeric"属性，移动端会自动弹出数字键盘，体验和type=number完全一致。

方案2：onChange值过滤（简单场景快速实现） #

如果不需要极致的输入体验，可以直接在onChange阶段过滤非法字符，缺点是快速输入时可能出现极短暂的非法字符闪烁：

<input
  type="number"
  value={fromTo}
  onChange={e => {
    // 过滤所有非数字、非小数点字符，限制仅一个小数点
    const validVal = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    setFromTo(validVal);
  }}
/>

注意这个方案必须给input绑定受控的value属性，否则过滤后的值不会同步到输入框，这也是多数人写正则校验不生效的常见问题。

• 不要依赖type="number"的原生行为做输入限制，各浏览器实现差异极大，跨浏览器兼容必须自行实现输入拦截逻辑
• 如果业务需要支持负数输入，只需要在正则匹配规则中加入-的判断，同时额外限制-只能出现在值的最首位即可

内容的提问来源于stack exchange，提问作者m.szumilo