如何让Material UI TextField仅接受hh:mm:ss格式输入？

嘿，这个需求我之前也碰到过！要实现Material UI TextField自动保持hh:mm:ss格式，同时只让用户修改数字部分，其实可以通过实时输入控制+格式化处理来搞定，给你几个实用的方案：

方案一：实时格式化输入（推荐） #

通过监听onChange事件，过滤非数字字符并自动插入冒号，让输入过程中始终保持规范格式。

代码示例 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';

const TimeInput = () => {
  const [time, setTime] = useState('');

  const handleTimeChange = (e) => {
    // 第一步：过滤所有非数字字符，只保留数字
    let rawInput = e.target.value.replace(/\D/g, '');
    let formattedTime = '';

    // 第二步：按hh:mm:ss的规则拼接格式
    if (rawInput.length >= 2) {
      // 处理小时部分，限制在00-23
      const hours = rawInput.substring(0, 2);
      const validHours = parseInt(hours) > 23 ? '23' : hours;
      formattedTime += validHours + ':';

      if (rawInput.length >= 4) {
        // 处理分钟部分，限制在00-59
        const minutes = rawInput.substring(2, 4);
        const validMinutes = parseInt(minutes) > 59 ? '59' : minutes;
        formattedTime += validMinutes + ':';

        // 处理秒部分，限制在00-59
        const seconds = rawInput.substring(4, 6);
        const validSeconds = parseInt(seconds) > 59 ? '59' : seconds;
        formattedTime += validSeconds;
      } else {
        // 分钟部分未输完时，直接拼接剩余数字
        formattedTime += rawInput.substring(2);
      }
    } else {
      // 小时部分未输完时，直接显示输入的数字
      formattedTime = rawInput;
    }

    setTime(formattedTime);
  };

  return (
    <TextField
      label="时间 (hh:mm:ss)"
      value={time}
      onChange={handleTimeChange}
      inputProps={{ 
        maxLength: 8, // 限制总长度为8（hh:mm:ss共8个字符）
        placeholder: "00:00:00"
      }}
      variant="outlined"
    />
  );
};

export default TimeInput;

效果说明 #

• 用户只能输入数字，非数字字符会被自动过滤
• 输入到第2位数字时，自动插入第一个冒号；输入到第4位时，自动插入第二个冒号
• 自动限制小时在00-23、分钟和秒在00-59范围内，避免无效时间输入
• 即使用户手动删除冒号，输入框也会自动重新格式化，保持规范格式

方案二：结合失焦格式化+格式验证 #

如果不需要实时格式化，可以在用户离开输入框时统一处理格式，同时用HTML5的pattern属性做提交前验证：

import { useState } from 'react';
import TextField from '@mui/material/TextField';

const TimeInput = () => {
  const [time, setTime] = useState('');

  const handleBlur = () => {
    let rawInput = time.replace(/\D/g, '');
    // 补全到6位数字，不足的补0
    rawInput = rawInput.padEnd(6, '0').substring(0, 6);
    const formatted = `${rawInput.substring(0,2)}:${rawInput.substring(2,4)}:${rawInput.substring(4,6)}`;
    setTime(formatted);
  };

  return (
    <TextField
      label="时间 (hh:mm:ss)"
      value={time}
      onChange={(e) => setTime(e.target.value)}
      onBlur={handleBlur}
      inputProps={{
        pattern: '([01]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])',
        title: "请输入正确的hh:mm:ss格式时间"
      }}
      variant="outlined"
    />
  );
};

export default TimeInput;

效果说明 #

• 用户可以自由输入，离开输入框时自动补全为hh:mm:ss格式
• 提交表单时，浏览器会自动验证格式是否符合要求，不符合则提示用户

备注：内容来源于stack exchange，提问作者Strike