当前位置: 首页 > article >正文

Blazor-设置组件焦点

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

@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();
    }
}

在代码中elementReference我们可以理解为就是input元素,相当于dom元素一样
点击前:
在这里插入图片描述

点击后:
在这里插入图片描述


http://www.kler.cn/a/549185.html

相关文章:

  • 记忆力训练day19
  • 【Python】错误异常
  • PHP基础部分
  • HTTP、HTTPS区别可靠性及POST为什么比GET安全的探讨
  • 光化学腐蚀法制作DIY钢网的制作流程
  • qt:对象树,窗口坐标,信号与槽
  • 【网络】协议与网络版计算器
  • BMS项目-面试及答疑整理
  • linux--关于linux文件IO(2) open、read、lseek、stat
  • C#中的动态类型用法总结带演示代码
  • 【函数题】6-12 二叉搜索树的操作集
  • AI程序员(aider)+ollama+DeepSeek-R1安装配置和使用
  • 「vue3-element-admin」Vue3 + TypeScript 项目整合 Animate.css 动画效果实战指南
  • (学习总结24)Linux 基本命令2
  • Ollama 开发指南
  • 索引----数据库
  • 30个常用的DEEPSEEK提示词
  • B+Tree在mysql中的使用
  • 前端高级面试题
  • 大语言模型简史:从Transformer(2017)到DeepSeek-R1(2025)的进化之路