如何阻止MudTextField的OnKeyDown事件传播？解决输入重复问题

方法一：修正键盘事件处理，调用阻止默认行为的方法 #

你之前的错误是试图设置StopPropagation属性，而Blazor的KeyboardEventArgs提供的是方法而非属性。正确做法是调用PreventDefault()阻止默认输入行为，同时调用StopPropagation()阻止事件传播，这样就不会出现输入数字被插入两次的问题。

修改后的组件代码：

<MudTextField @bind-Value="_tripModel!.TripLength" Label="Length" Variant="Variant.Text" OnKeyDown="OnMileageKeyDown"></MudTextField>

修改后的事件处理方法：

private void OnMileageKeyDown(KeyboardEventArgs args)
{
    if (_tripModel!.TripLength == 0)
    {
        if (int.TryParse(args.Key, out int keyInt))
        {
            _tripModel.TripLength = keyInt;
            args.PreventDefault(); // 阻止文本框默认的输入行为
            args.StopPropagation(); // 阻止事件向上传播
            StateHasChanged();
        }
    }
}

方法二：使用MudTextField的OnBeforeTextChange事件（更推荐） #

相比键盘事件，OnBeforeTextChange直接拦截文本变更操作，能覆盖更多场景（比如粘贴输入），逻辑更简洁：

组件代码：

<MudTextField @bind-Value="_tripModel!.TripLength" Label="Length" Variant="Variant.Text" OnBeforeTextChange="OnBeforeMileageTextChange"></MudTextField>

事件处理方法：

private Task OnBeforeMileageTextChange(BeforeTextChangeEventArgs args)
{
    if (_tripModel!.TripLength == 0)
    {
        // 处理数字和小数点输入，避免0被保留
        if (!string.IsNullOrEmpty(args.Text))
        {
            var firstChar = args.Text[0];
            if (char.IsDigit(firstChar) || firstChar == '.')
            {
                // 直接用输入内容替换原有的0，输入小数点时自动补0前缀
                args.Text = firstChar == '.' ? $"0{args.Text}" : args.Text;
            }
        }
    }
    return Task.CompletedTask;
}

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