如何在Maui Blazor中隐藏虚拟键盘的非数字按键？

要让绑定int类型属性的输入字段只显示数字键盘，可通过以下几种方式实现：

1. 利用HTML5输入类型基础配置 #

直接使用Blazor的InputNumber组件，它默认会触发数字键盘：

<InputNumber @bind-Value="YourIntProperty" />

也可以用原生<input>标签指定type="number"：

<input type="number" @bind="YourIntProperty" />

注：部分平台可能仍会显示少量非数字按键，需结合平台特定配置进一步优化。

2. 平台级强制数字键盘配置 #

针对Android和iOS分别设置键盘类型，确保只显示纯数字按键：

Android平台 #

创建自定义输入组件的渲染器，指定输入类型为数字：

// 放在Platforms/Android目录下
[assembly: ExportRenderer(typeof(NumberInput), typeof(NumberInputRenderer))]
namespace YourAppName.Platforms.Android
{
    public class NumberInputRenderer : ViewRenderer<NumberInput, EditText>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NumberInput> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 只允许正整数则去掉NumberFlagSigned
                Control.InputType = Android.Text.InputTypes.ClassNumber | Android.Text.InputTypes.NumberFlagSigned;
            }
        }
    }
}

iOS平台 #

同样创建渲染器，设置键盘类型为数字键盘：

// 放在Platforms/iOS目录下
[assembly: ExportRenderer(typeof(NumberInput), typeof(NumberInputRenderer))]
namespace YourAppName.Platforms.iOS
{
    public class NumberInputRenderer : ViewRenderer<NumberInput, UITextField>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NumberInput> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.KeyboardType = UIKeyboardType.NumberPad;
            }
        }
    }
}

对应的Blazor自定义组件NumberInput.razor：

@inherits InputBase<int>
<input type="number" @bind="CurrentValue" />

3. 输入内容过滤（额外保障） #

通过Blazor的输入事件过滤非数字字符，防止用户通过其他方式输入无效内容：

<input type="number" @bind-Value="YourIntProperty" @oninput="FilterInput" />

@code {
    public int YourIntProperty { get; set; }

    private void FilterInput(ChangeEventArgs e)
    {
        if (e.Value is string input)
        {
            // 保留数字和负号（允许负数的情况）
            var filtered = new string(input.Where(c => char.IsDigit(c) || c == '-').ToArray());
            YourIntProperty = string.IsNullOrEmpty(filtered) ? 0 : int.Parse(filtered);
        }
    }
}

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