在Blazor WASM中捕获空格键并阻止浏览器默认滚动行为

直接在现有事件处理中阻止默认行为 #

你只需要在捕获空格键的逻辑里调用args.PreventDefault()，就能禁用浏览器默认的页面滚动行为。修改后的代码如下：

public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
{
    if (args.Key == KeyCode.Space)
    {
        _logger.LogInformation("[SPACE] pressed");
        // 取消浏览器默认行为（阻止页面滚动）
        args.PreventDefault();
    }
}

关于IKeyCodeService.RegisterListener的使用 #

如果是通过IKeyCodeService注册全局键盘监听，同样可以在回调中调用PreventDefault()来实现需求，示例代码如下：

@inject IKeyCodeService KeyCodeService

@code {
    protected override void OnInitialized()
    {
        KeyCodeService.RegisterListener(KeyCode.Space, async args =>
        {
            _logger.LogInformation("[SPACE] pressed via global listener");
            args.PreventDefault();
        }, KeyEventType.KeyDown);
    }
}

原理说明：FluentKeyCodeEventArgs封装了浏览器原生事件对象，调用PreventDefault()会直接取消事件的默认动作，针对空格键就是阻止页面向下滚动。这种方式是FluentUI框架内的标准处理方式，无需额外引入其他逻辑。

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