Blazor Server .NET8中MudNumericField限制小数位数的实现问题

核心思路 #

通过OnBeforeInput事件在输入发生前拦截超过小数位限制的非法输入，同时在ValueChanged中手动截断小数位避免四舍五入，结合组件自带的格式化规则实现千位逗号显示。

实现步骤 #

1. 配置MudNumericField组件 #

移除自动绑定@bind-Value，改用手动绑定Value和ValueChanged，添加OnBeforeInput事件处理输入拦截：

<MudNumericField Value="Allowance"
                 T="decimal"
                 Culture="@(CultureInfo.GetCultureInfo("en-US"))"
                 Format="C2"
                 Min="0"
                 OnBeforeInput="OnBeforeInputHandler"
                 ValueChanged="OnValueChanged" />

2. 实现输入拦截逻辑 #

在OnBeforeInput事件中，判断输入内容是否会导致小数位超限，同时允许退格、箭头等控制键正常使用：

private bool OnBeforeInputHandler(BeforeInputEventArgs e)
{
    // 允许控制类按键通过
    if (e.IsComposing || 
        e.InputType is "deleteContentBackward" or "deleteContentForward" ||
        e.Key is "Backspace" or "Delete" or "ArrowLeft" or "ArrowRight" or "ArrowUp" or "ArrowDown")
    {
        return true;
    }

    // 移除当前值中的千位逗号，获取纯数字字符串
    string currentValue = e.Target.Value.Replace(",", "");
    string inputContent = e.Data;

    // 计算输入后的完整字符串（考虑光标位置和选中内容）
    int selectionStart = e.Target.SelectionStart;
    int selectionEnd = e.Target.SelectionEnd;
    string newValue = currentValue.Remove(selectionStart, selectionEnd - selectionStart)
                                 .Insert(selectionStart, inputContent);

    // 验证输入格式是否符合2位小数限制
    return ValidateDecimalInput(newValue, 2);
}

private bool ValidateDecimalInput(string input, int maxDecimalPlaces)
{
    // 空值或单个小数点允许输入
    if (string.IsNullOrEmpty(input) || input == ".")
        return true;

    // 验证是否为有效数字格式
    if (!decimal.TryParse(input, out _))
        return false;

    // 检查小数位数是否超过限制
    int decimalIndex = input.IndexOf('.');
    if (decimalIndex != -1)
    {
        int decimalPlaces = input.Length - decimalIndex - 1;
        if (decimalPlaces > maxDecimalPlaces)
            return false;
    }

    return true;
}

3. 手动截断小数位避免四舍五入 #

在ValueChanged事件中，对传入的值进行截断处理（而非四舍五入），确保最终值始终保留指定小数位：

private decimal Allowance { get; set; } = 0.0m;

private void OnValueChanged(decimal newValue)
{
    // 截断到2位小数，不进行四舍五入
    Allowance = Math.Truncate(newValue * 100) / 100;
}

说明 #

• Format="C2"和Culture="en-US"确保组件自动显示千位逗号和2位小数格式。
• OnBeforeInput从源头阻止非法输入，避免输入后再修改导致的字符闪烁问题。
• Math.Truncate用于截断小数位，替代默认的四舍五入逻辑，满足保留99.99而非100的需求。

内容的提问来源于stack exchange，提问作者Her Oine