如何将带掩码的MudTextField绑定到TimeSpan变量？

要实现你需要的输入逻辑，默认的MudTextField掩码绑定满足不了这种从右往左自动分配数字到时间位的需求，得手动处理输入文本并转换为TimeSpan，具体实现如下：

1. 完整代码实现 #

@page "/time-input"

<MudTextField 
    @ref="_timeInput"
    Value="@_displayText"
    ValueChanged="HandleValueChanged"
    Mask="00:00:00"
    Label="hh:mm:ss"
    Variant="Variant.Outlined"
    Margin="Margin.Dense"
    InputMode="InputMode.Numeric"
/>

@code {
    private MudTextField<string>? _timeInput;
    private TimeSpan _time = TimeSpan.Zero;
    private string _displayText = "00:00:00";

    private void HandleValueChanged(string input)
    {
        // 仅保留输入中的数字字符
        var digits = new string(input.Where(char.IsDigit).ToArray());
        
        int hours = 0, minutes = 0, seconds = 0;
        // 根据数字长度从右往左分配时、分、秒
        switch (digits.Length)
        {
            case 1:
                seconds = int.Parse(digits);
                break;
            case 2:
                seconds = int.Parse(digits);
                break;
            case 3:
                minutes = int.Parse(digits[0].ToString());
                seconds = int.Parse(digits.Substring(1));
                break;
            case 4:
                minutes = int.Parse(digits.Substring(0, 2));
                seconds = int.Parse(digits.Substring(2));
                break;
            case 5:
                hours = int.Parse(digits[0].ToString());
                minutes = int.Parse(digits.Substring(1, 2));
                seconds = int.Parse(digits.Substring(3));
                break;
            case 6:
                hours = int.Parse(digits.Substring(0, 2));
                minutes = int.Parse(digits.Substring(2, 2));
                seconds = int.Parse(digits.Substring(4));
                break;
        }

        // 限制数值在有效范围内
        seconds = Math.Clamp(seconds, 0, 59);
        minutes = Math.Clamp(minutes, 0, 59);
        hours = Math.Clamp(hours, 0, 23);

        // 更新绑定的TimeSpan变量
        _time = new TimeSpan(hours, minutes, seconds);
        // 更新输入框显示的格式化文本
        _displayText = _time.ToString(@"hh\:mm\:ss");

        // 自动将光标定位到输入框末尾，优化连续输入体验
        _timeInput?.FocusAsync();
        _timeInput?.SetCursorPosition(_displayText.Length);
    }
}

2. 核心逻辑说明 #

• 输入过滤：自动过滤非数字字符，避免用户输入格式混乱
• 数字分配规则：严格按照你需要的逻辑，从右往左将数字分配到秒、分、时位：
  • 1-2位输入：全部对应秒
  • 3-4位输入：前1-2位对应分，后2位对应秒
  • 5-6位输入：前1-2位对应时，中间2位对应分，后2位对应秒
• 有效性校验：用Math.Clamp确保秒、分不超过59，小时不超过23，避免生成无效TimeSpan
• 体验优化：设置InputMode="InputMode.Numeric"让移动端弹出数字键盘，同时自动将光标定位到输入末尾，提升连续输入流畅度

内容的提问来源于stack exchange，提问作者Zoltán