如何在Maui Blazor中强制输入框仅接受数字？

你遇到的问题是因为移动端HTML5的Pattern属性仅在表单提交时触发验证，不会实时过滤输入内容。以下是两种实用的解决方案：

方案一：实时过滤输入+优化软键盘 #

通过InputMode让移动端弹出纯数字键盘，再用OnInput事件实时过滤非数字字符，同时限制数值范围：

<MudNumericField
    @bind-Value="value"
    Label="Standard"
    Variant="Variant.Text" 
    Min="0" 
    Max="10"
    InputMode="numeric"
    OnInput="OnNumericInput" />

@code {
    int value = 0;

    private void OnNumericInput(ChangeEventArgs e)
    {
        var inputStr = e.Value?.ToString() ?? string.Empty;
        // 只保留输入中的数字字符
        var filteredStr = new string(inputStr.Where(c => char.IsDigit(c)).ToArray());
        
        if (int.TryParse(filteredStr, out int num))
        {
            // 确保数值在设定的Min和Max范围内
            value = Math.Clamp(num, 0, 10);
        }
        else
        {
            // 过滤后无有效数字时重置为0
            value = 0;
        }
    }
}

方案二：内置验证提示 #

如果不需要实时过滤，可通过MudBlazor的内置验证规则，在用户输入非法值时显示错误提示：

<MudNumericField
    @bind-Value="value"
    Label="Standard"
    Variant="Variant.Text" 
    Min="0" 
    Max="10"
    InputMode="numeric"
    Required="true"
    Validation="@(v => v is int ? null : "请输入有效的整数")" />

@code {
    int value = 0;
}

关键注意点 #

• InputMode="numeric"是核心配置，能让移动端自动弹出纯数字软键盘，从根源减少非数字输入的可能；
• 移动端软键盘不会触发桌面端常用的KeyDown事件，所以优先用OnInput做实时处理；
• MudNumericField绑定int类型时，输入非数字内容会自动回退，但实时过滤能提供更流畅的用户体验。

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