Blazor 处理焦点主要靠 ElementReference + FocusAsync()，配合 JS 互操作底层实现。核心不是直接调用 JS 的 focus()，而是通过 Blazor 提供的安全、生命周期感知的方式操作 DOM 元素。
基础方式：@ref + FocusAsync()
这是最常用也最推荐的原生做法：
给目标 HTML 元素（如<input>）加
@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或用户动作后
基本上就这些。不复杂但容易忽略细节。
