如何在Blazor环境中实现F3键全局切换弹窗显示/隐藏？

要实现无论焦点在哪都能通过F3键切换弹窗的显示隐藏，你需要借助JS互操作绑定全局键盘事件，再联动Blazor组件的状态，具体步骤如下：

1. 编写全局键盘监听的JS逻辑 #

在项目wwwroot目录下创建（或修改）site.js文件，添加以下代码：

let f3KeyHandler = null;

// 绑定全局F3键监听
window.bindGlobalF3Key = (dotnetRef) => {
    f3KeyHandler = (event) => {
        if (event.key === 'F3') {
            event.preventDefault(); // 阻止浏览器默认F3行为（比如打开搜索框）
            // 调用Blazor组件的状态切换方法
            dotnetRef.invokeMethodAsync('ToggleModalVisibility');
        }
    };
    document.addEventListener('keydown', f3KeyHandler);
};

// 移除全局监听（避免内存泄漏）
window.unbindGlobalF3Key = () => {
    if (f3KeyHandler) {
        document.removeEventListener('keydown', f3KeyHandler);
        f3KeyHandler = null;
    }
};

2. 实现Blazor组件 #

在包含弹窗的组件（或页面）中完成以下操作：

2.1 注入依赖与声明接口 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

2.2 定义弹窗状态与JS可调用方法 #

private bool isModalVisible = false;

// 标记为允许JS调用的方法
[JSInvokable]
public void ToggleModalVisibility()
{
    isModalVisible = !isModalVisible;
    StateHasChanged(); // 通知组件更新UI
}

2.3 生命周期中绑定/移除事件 #

private DotNetObjectReference<YourComponentName>? _dotNetRef;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 创建组件的DotNet引用，让JS能调用组件方法
        _dotNetRef = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("bindGlobalF3Key", _dotNetRef);
    }
    await base.OnAfterRenderAsync(firstRender);
}

// 组件销毁时清理事件监听
public async ValueTask DisposeAsync()
{
    if (_dotNetRef != null)
    {
        await JSRuntime.InvokeVoidAsync("unbindGlobalF3Key");
        _dotNetRef.Dispose();
    }
}

2.4 渲染弹窗UI #

这里以Bootstrap模态框为例，你可以替换成自己的弹窗组件：

@if (isModalVisible)
{
    <div class="modal show d-block" style="background-color: rgba(0,0,0,0.5)">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">全局F3触发弹窗</h5>
                </div>
                <div class="modal-body">
                    按下F3可切换我的显示/隐藏状态
                </div>
            </div>
        </div>
    </div>
}

关键注意事项 #

• 用event.key === 'F3'而非keyCode，后者在部分浏览器已被废弃，兼容性更差。
• 必须在组件销毁时移除事件监听并释放DotNetObjectReference，否则会造成内存泄漏。
• event.preventDefault()可避免F3触发浏览器自带功能，确保按键行为完全由你的逻辑控制。

内容的提问来源于stack exchange，提问作者Erik Zámečník