Blazor-设置组件焦点

原创已于 2025-07-29 13:16:03 修改 · 482 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #blazor #c#

于 2025-02-16 23:05:20 首次发布

Blazor 专栏收录该内容

38 篇文章

订阅专栏

ElementReference设置焦点

在Razor中设置焦点我们需要用到ElementReference类型的变量，使用ElementReference可以轻松管理DOM元素的焦点使用，@ref指令引用到设置焦点HTML的元素。
在Blazor中，ElementReference类型的作用是提供对HTML DOM元素的引用，以便在C#代码中通过JavaScript互操作（JS Interop）操作特定元素。

ElementReference说明

在这里我们也简单说一下ElementReference的使用和作用。更详细的内容大家可以专门查阅ElementReference的相关文章进行学习。

lementReference是Blazor提供的轻量级封装对象，代表对真实DOM元素的引用。它通过以下机制工作：

引用绑定：当组件渲染时，Blazor运行时将DOM元素与C#变量关联
跨语言通信：调用FocusAsync()方法时触发JS互操作
生命周期管理：自动处理元素销毁时的清理工作
安全访问：提供安全的跨语言边界访问机制

设置焦点示例

@page "/userInfo"

<h3>UserInfo</h3>
<label>姓名</label>
<input />
<label>年龄</label>
<input @ref=elementReference />
<button @onclick=SetFocus>设置焦点</button>
@code {
    ElementReference elementReference;
    public void SetFocus(){
        elementReference.FocusAsync();
    }
}