MudBlazor MudTextField多掩码回退显示异常问题求助

问题分析 #

你用MultiMask实现的动态掩码切换，在输入超过11位数字时正常，但删除字符回退到短掩码时格式混乱，核心原因是：

• MultiMask的匹配规则基于格式化后的完整字符串（包含分隔符），而非原始数字长度
• 切换到长掩码后，字符串的分隔符位置和短掩码完全不同，回退时直接套用短掩码会导致现有字符错位，比如出现123.412.341/22这类错误格式

基于掩码的解决方案：手动控制掩码切换+纯数字重格式化 #

放弃MultiMask，改为在值变化时提取纯数字，根据数字长度动态切换掩码，并重新格式化字符串，从根源避免错位问题。

实现代码

<MudTextField T="string" 
              Value="@_number"
              ValueChanged="@OnValueChanged"
              Label="Order/Id"
              Required="true"
              Mask="@_currentMask"
              MaskPlaceholder="">
</MudTextField>

@code {
    private string _number = string.Empty;
    private string _currentMask = "0000.0000.00-00";

    private void OnValueChanged(string inputValue)
    {
        // 提取输入中的所有纯数字字符
        var pureDigits = new string(inputValue.Where(char.IsDigit).ToArray());
        string targetMask;
        string formattedResult;

        // 根据纯数字长度判断目标掩码
        if (pureDigits.Length > 11)
        {
            targetMask = "000.000.000/000-000";
            formattedResult = FormatWithMask(pureDigits, targetMask);
        }
        else
        {
            targetMask = "0000.0000.00-00";
            formattedResult = FormatWithMask(pureDigits, targetMask);
        }

        // 掩码切换时，强制更新值和组件状态
        if (_currentMask != targetMask)
        {
            _currentMask = targetMask;
            _number = formattedResult;
            StateHasChanged();
        }
        else
        {
            _number = inputValue;
        }
    }

    // 手动实现数字到掩码格式的转换
    private string FormatWithMask(string digits, string mask)
    {
        var resultBuilder = new StringBuilder();
        int digitPos = 0;

        foreach (var maskChar in mask)
        {
            if (digitPos >= digits.Length)
                break;

            // 掩码中的0对应填充数字，其他字符直接保留
            if (maskChar == '0')
            {
                resultBuilder.Append(digits[digitPos]);
                digitPos++;
            }
            else
            {
                resultBuilder.Append(maskChar);
            }
        }

        return resultBuilder.ToString();
    }
}

关键逻辑说明

1. 纯数字提取：每次值变化时过滤掉所有非数字字符，确保长度判断的准确性
2. 动态掩码选择：基于纯数字长度选择对应掩码，而非格式化后的字符串长度
3. 重格式化：切换掩码时，用纯数字重新生成符合目标掩码的字符串，彻底避免字符错位
4. 状态控制：掩码切换时手动触发StateHasChanged()，确保组件及时更新显示

为什么不用MultiMask？ #

MultiMask的匹配规则依赖正则匹配格式化后的字符串，无法精准识别原始数字长度。当从长掩码回退时，已格式化的字符串包含长掩码的分隔符，此时切换短掩码会直接将这些字符按短掩码规则解析，必然导致错位。

内容的提问来源于stack exchange，提问作者Caio Marcus