Blazor客户端UI事件处理：如何设置输入控件焦点？

嘿，很高兴看到你在挖掘Blazor的潜力！关于设置输入控件焦点这个需求，完全不需要依赖jQuery——Blazor本身就提供了简洁的内置方法，我给你梳理两种最常用的方案：

一、官方推荐：使用ElementReference（最直接） #

这是Blazor专门为DOM元素交互设计的方式，强类型且无需JS互操作，步骤超简单：

1. 在组件中定义ElementReference变量，通过@ref绑定到目标输入框
2. 在点击事件（或其他触发逻辑）中调用FocusAsync()方法

示例代码：

<!-- 绑定元素引用 -->
<input @ref="usernameInput" type="text" placeholder="请输入用户名" />
<button @onclick="FocusOnUsername">点击聚焦到输入框</button>

@code {
    // 声明元素引用变量
    private ElementReference usernameInput;

    // 点击事件处理方法
    private async Task FocusOnUsername()
    {
        // 调用内置的FocusAsync方法设置焦点
        await usernameInput.FocusAsync();
    }
}

这个方法的优势在于：完全在C#代码中完成，不需要写任何JS，而且避免了依赖元素ID可能带来的冲突问题。

二、特殊场景：JS互操作（可选） #

如果你的需求比较特殊（比如需要兼容极老版本的Blazor，或者要操作第三方组件的DOM），也可以通过JS互操作实现，但这属于备选方案，一般情况下ElementReference足够用：

1. 在wwwroot/js目录下创建一个JS文件（比如focusUtils.js），添加聚焦函数：

window.setElementFocus = function(elementId) {
    const element = document.getElementById(elementId);
    if (element) element.focus();
}

2. 在Blazor组件中注入IJSRuntime，调用这个JS函数：

<input id="emailInput" type="email" placeholder="请输入邮箱" />
<button @onclick="FocusOnEmailViaJS">点击聚焦（JS方式）</button>

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task FocusOnEmailViaJS()
    {
        await JSRuntime.InvokeVoidAsync("setElementFocus", "emailInput");
    }
}

总结 #

• 90%的场景下，优先使用ElementReference + FocusAsync()，这是Blazor的原生方案，最符合框架设计理念
• 完全不需要引入jQuery，Blazor的内置API已经能覆盖这类基础DOM操作
• 如果你已经有自己的聚焦示例，可以尝试替换成ElementReference的方式，代码会更简洁安全

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