MUI TextField设置type为number时maxLength不生效的解决方法

HTML原生的<input type="number">本身不支持maxLength属性，这就是你设置了inputProps={{ maxLength: ... }}却没效果的核心原因。下面给你几种可行的解决办法：

方法一：通过onChange手动截断输入 #

在输入变化时手动限制位数，这是最直接有效的方式。可以在CustomTextField内部处理，也可以修改外部传入的handleChange函数：

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {
    const handleNumberChange = (e) => {
        let inputValue = e.target.value;
        if (type === 'number' && maxLength) {
            // 转字符串截断后再转回数字格式
            inputValue = inputValue.slice(0, parseInt(maxLength));
            // 调用原handleChange更新值
            handleChange({ target: { ...e.target, value: inputValue } });
        } else {
            handleChange(e);
        }
    };

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type}
            placeholder={placeholder}
            // 数字类型无需maxLength，文本类型保留原设置
            inputProps={type !== 'number' ? { maxLength: (maxLength && parseInt(maxLength)) || 99} : {}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={type === 'number' ? handleNumberChange : handleChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

方法二：用inputMode="numeric"替代type="number" #

如果你的需求只是弹出数字键盘，不需要原生number输入的上下箭头等特性，可以把type设为text，同时添加inputMode="numeric"，这样就能正常使用maxLength：

// 组件内部处理逻辑
const inputType = type === 'number' ? 'text' : type;
const inputProps = {
    ...(type === 'number' ? { inputMode: 'numeric' } : {}),
    maxLength: (maxLength && parseInt(maxLength)) || 99
};

// 渲染TextField时
<TextField
    type={inputType}
    inputProps={inputProps}
    // 其他属性不变
/>

这种方式需要额外做输入验证，确保用户输入的是数字，可以在handleChange里过滤非数字字符。

方法三：用max属性限制数值范围（仅适合固定位数场景） #

如果你的数字是固定位数（比如6位验证码），可以计算对应最大值（6位对应999999），设置inputProps={{ max: 999999 }}。但这种方式的问题是，用户输入超过时，输入框会自动变成最大值，而非截断输入，体验不如前两种方法。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A