MUI v4中TextField设置pattern无法限制仅输入数字如何解决

你配置的inputMode: 'numeric'和pattern: '[0-9]*'本身就不具备实时拦截非数字输入的能力，和MUI版本、属性嵌套写法无关：

• inputMode 属性仅作用于移动端，控制唤起的键盘类型为数字布局，不会对输入内容做任何限制
• pattern 是原生表单的提交校验规则，仅在表单提交时触发校验提示，不会阻止用户实时输入不符合规则的字符，即便是MUI v5版本直接把这两个属性挂在顶层inputProps上，也同样无法阻止非数字输入。

你在MUI v4中通过InputProps嵌套inputProps传递原生输入框属性的写法是符合v4 API规则的，不生效的核心原因是对上述两个属性的作用存在误解。

由于你明确排除了type="number"的实现（规避空值默认填充0、自带步进器的问题），推荐使用受控组件+全场景输入过滤的实现，覆盖键盘输入、粘贴、文本拖拽等所有输入路径：

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';

export default function NumberOnlyField() {
  const [inputVal, setInputVal] = useState('');

  const handleChange = (e) => {
    // 正则匹配过滤所有非数字字符，仅保留0-9的内容
    const validVal = e.target.value.replace(/[^0-9]/g, '');
    setInputVal(validVal);
  };

  return (
    <TextField
      value={inputVal}
      onChange={handleChange}
      // 可选配置：移动端唤起数字键盘，关闭自动拼写提示
      inputProps={{
        inputMode: 'numeric',
        autoComplete: 'off'
      }}
      spellCheck={false}
    />
  );
}

如果业务需要支持小数、负号等特殊数字格式，只需要调整过滤正则即可，比如要支持最多两位小数，可以把过滤逻辑调整为对应规则匹配。

注意：不要单独使用onKeyDown/onKeyPress拦截按键的方案，这种方式无法拦截右键粘贴、鼠标拖拽填入的非数字内容，覆盖场景不全。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates