Blazor 怎么处理焦点 (Focus)

Blazor 处理焦点主要依靠 ElementReference + FocusAsync()，通过安全、生命周期感知的 JS 互操作实现；基础方式为 @ref 绑定后调用 FocusAsync()，需确保元素已渲染；高级组件应优先用 @onfocusin 或 SearchFunc 控制焦点逻辑；自动聚焦应在 OnAfterRenderAsync 中判断 firstRender 执行；排查聚焦失效需检查元素存在性、异步层焦点归还及生命周期时机。

Blazor 处理焦点主要靠 ElementReference + FocusAsync()，配合 JS 互操作底层实现。核心不是直接调用 JS 的 focus()，而是通过 Blazor 提供的安全、生命周期感知的方式操作 DOM 元素。

基础方式：@ref + FocusAsync()

这是最常用也最推荐的原生做法：

• 给目标 HTML 元素（如 ）加 @ref="myInput"，绑定一个 ElementReference 类型变量
• 在 C# 方法中调用 myInput.FocusAsync() —— 这会自动触发 JS 互操作，安全聚焦元素
• 注意：必须确保元素已渲染完成，通常放在 OnAfterRenderAsync 或按钮点击等用户交互后执行，避免首次渲染前调用失败

MudBlazor Autocomplete 等高级组件的焦点处理

这类封装组件内部管理焦点逻辑，直接用 @onfocus 往往不生效：

• 优先使用 @onfocusin 事件处理器，它能穿透组件内部的事件拦截
• 数据加载类逻辑（比如聚焦时拉取建议），应放在 SearchFunc 回调里，而不是依赖焦点事件
• 需要控制响应节奏？调整 DebounceInterval 参数，减少高频请求

首次加载自动聚焦（比如表单第一个字段）

常见于登录页、结账页等场景：

• 在组件的 OnAfterRenderAsync 中判断 firstRender，只执行一次
• 调用 elementReference.FocusAsync() 即可，无需手动注入 JS 函数
• 如果用了第三方组件（如 BlazoredTypeahead），且 @ref 不直接暴露输入框，可借助 JS 互操作：在 firstRender 时调用 JSRuntime.InvokeVoidAsync("focusElement", refId)，再在 JS 里查 DOM 并 focus

焦点异常排查要点

聚焦失效？别急着重写逻辑，先看这几个点：

• 元素是否被条件渲染（@if）但尚未显示？确保 ElementReference 绑定的目标真实存在
• 是否有异步弹窗或下拉层（如 DatePicker）关闭时没正确归还焦点？检查 OnKeyDown 中对 Tab/Enter 的处理是否调用了 preventDefault 或遗漏 FocusAsync
• 组件是否在 OnInitialized 阶段就尝试聚焦？此时 DOM 尚未生成，必须延后到 OnAfterRenderAsync 或用户动作后

基本上就这些。不复杂但容易忽略细节。