React JS中如何限制number类型TextField长度并禁止输入E、e、-、+等字符

我之前也踩过这个坑！number类型的输入框确实不太听话，浏览器自带的min、max、maxlength属性对它的支持很有限，尤其是科学计数法相关的E、e、-、+这些字符，根本拦不住。给你两个亲测有效的解决方案，按需选择：

方案一：保留number类型，通过事件处理过滤输入 #

这个方案基于你原来的number类型TextField，通过onChange事件手动处理输入内容，精准控制字符和数值范围：

首先在组件中添加输入处理函数：

handleCodeChange = (e) => {
  // 第一步：过滤掉所有非法字符（E、e、+、-）
  let cleanValue = e.target.value.replace(/[Ee+-]/g, '');
  
  // 第二步：限制输入长度不超过6位
  if (cleanValue.length > 6) {
    cleanValue = cleanValue.slice(0, 6);
  }
  
  // 第三步：约束数值在0-999999之间，避免空值或非数字
  const numValue = parseInt(cleanValue, 10) || 0;
  const finalValue = Math.max(0, Math.min(999999, numValue));
  
  // 用字符串存状态，避免输入的前导0被自动去掉（比如00123会保留原样）
  this.setState({ code: finalValue.toString() });
}

然后修改你的TextField组件，绑定处理函数：

<TextField
  id="sampleFiled"
  label="VCode"
  type="number"
  required
  className="text-field"
  value={this.state.code}
  margin="normal"
  onChange={this.handleCodeChange}
  inputProps={{
    min: 0,
    max: 999999,
    // 虽然maxlength对number类型不生效，但加上不影响，作为兜底提示
    maxLength: 6
  }}
/>

额外优化：如果不想显示number输入框的上下箭头，可以加一段CSS：

/* 移除Chrome/Safari的上下箭头 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
/* 移除Firefox的上下箭头 */
input[type=number] {
  -moz-appearance: textfield;
}

方案二：改用text类型，配合正则完全控制输入 #

如果觉得number类型的坑太多，直接改用text类型是更稳定的选择，通过正则完全限制输入内容：

先写处理函数：

handleCodeChange = (e) => {
  // 只允许输入数字，且长度不超过6位
  const cleanValue = e.target.value.replace(/[^0-9]/g, '').slice(0, 6);
  this.setState({ code: cleanValue });
}

然后修改TextField：

<TextField
  id="sampleFiled"
  label="VCode"
  type="text"
  required
  className="text-field"
  value={this.state.code}
  margin="normal"
  onChange={this.handleCodeChange}
  inputProps={{
    // HTML5原生正则校验，提交时会自动检查并提示用户
    pattern: "^\\d{1,6}$",
    title: "请输入0-999999之间的数字"
  }}
/>

这个方案的好处是完全规避了number类型的兼容性问题，输入体验更一致。如果需要把输入值转成数字使用，在提交表单的时候用parseInt(this.state.code, 10)即可。

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