Angular2 - 将文本框聚焦于组件加载

2024-01-02

我正在 Angular2(Beta 8)中开发一个组件。该组件有一个文本框和一个下拉列表。我想在组件加载或下拉列表更改事件后立即将焦点设置在文本框中。我如何在 Angular2 中实现这一点?以下是该组件的 Html。

<div>
    <form role="form" class="form-horizontal ">        
        <div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Name</label>
                <div class="col-md-7 col-sm-7">
                    <input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />

                </div>
                <div class="col-md-2 col-sm-2">
                    <input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
                </div>
            </div>
        </div>
        <div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Person</label>
                <div class="col-md-7 col-sm-7">
                    <select [(ngModel)]="SelectedPerson.Id"  (change)="PersonSelected($event.target.value)" class="form-control">
                        <option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
                    </select>
                </div>
            </div>
        </div>        
    </form>
</div>

使用简单autofocusHTML5 属性适​​用于“加载时”场景

 <input autofocus placeholder="enter text" [(ngModel)]="test">

or

<button autofocus (click)="submit()">Submit</button>

http://www.w3schools.com/TAgs/att_input_autofocus.asp http://www.w3schools.com/TAgs/att_input_autofocus.asp

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 - 将文本框聚焦于组件加载 的相关文章

随机推荐

  • Node.js 标准输出刷新

    也许我在复制this https stackoverflow com questions 6471004 how can i write blocking in stdout with node js问题 但提供的答案可能指的是旧版本的节点
  • 向多个收件人发送电子邮件

    我已将一些旧代码从旧的 unix 盒子移至新的 unix 盒子 并且我在使用 perl 脚本向多个收件人发送电子邮件时遇到了一些困难 它适用于旧盒子 旧盒子 perl 为 PA RISC2 0 构建的版本 5 004 04 新框 perl
  • 如何使用 Python 显示 OSM 图块?

    我正在使用generate tiles py 生成图块 我想编写一个Python 应用程序来显示它们 而不是使用Web 界面 是否已经存在类似的东西 或者是否有关于如何自己编写此类应用程序的信息 您可以使用 Tilemill 或 QGIS
  • 图像字段不会显示在活动管理表单中

    gem formtastic gt 2 1 1 gem activeadmin gt 0 4 2 宝石 回形针 照片字段不会显示在活动管理表单 app views admin products form html erb 中 但是 app
  • 声明数组的不同语法:带和不带维度声明[重复]

    这个问题在这里已经有答案了 我在用着gfortran版本 7 2 0 我对 Fortran 很陌生 我知道 Fortran 有不同的版本 在下面的代码中 我使用不同的语法声明数组 或实际上是张量 program arrays implici
  • cmake 非常令人沮丧的问题

    我在 Windows 上使用 cmake 时遇到了令人沮丧的问题 我已经安装了 kde 库 当我尝试使用 cmake 编译我的项目时 这一次又一次地爆发 Found Qt Version 4 7 0 using C Qt 2010 05 q
  • 使用 Podman 通信不同的 pod

    我正在使用 podman compose 部署多个 Pod 为此 每个 pod 在 podman compose yaml 文件中都有自己的定义 我以无根模式执行该文件 因此 Pod 中的所有容器共存于同一主机 IP 中 但是 我希望 Po
  • asp.net core中间件中Map和MapWhen分支的区别?

    当我们验证请求时 何时在 asp net core 中间件中使用 Map 和 MapWhen 分支 public void Configure IApplicationBuilder app IHostingEnvironment env
  • “.el”与 JavaScript/HTML/jQuery 有何关系?

    我在谷歌搜索中找不到太多东西 但我可能谷歌搜索了错误的术语 我试图从这里理解 el 中的 el 是什么 http joestelmach github com laconic http joestelmach github com laco
  • 如何使用 Mono.WebBrowser?

    我将此页读了两遍http www mono project com WebBrowser http www mono project com WebBrowser但我不知道如何使用它 没有程序集 我也无法打字using Mono WebBr
  • 默认 nginx client_max_body_size

    我一直收到 nginx 错误 413 Request Entity Too Large 我已经能够更新我的client max body size在我的 nginx conf 文件的服务器部分中将其大小更改为 20M 这已经解决了问题 但是
  • 如何为 postgresql 配置 HikariCP?

    我正在尝试在 postgresql 中使用 HikariCP 但在任何地方都找不到 postgresql 的配置 请给我指出带有 HikariCP 的 postgresql 的任何示例或任何相同的配置教程 我尝试像下面那样使用它 但它不起作
  • 创建docx word文档 web api .net core 2.0

    我正在Asp net core 2 0中开发一个Web API项目 我需要一个库或方法来创建 Word 文档 我搜索了一个尝试过的 NPOI 和 DocX 两者都没有想象中那么好 有人能给我推荐一个工具吗 乍一看 以下链接可以有所帮助 ht
  • 如何在 Go 中使用 RSA 密钥加密和解密纯文本?

    我正在尝试编写一个实用程序 使用 RSA 密钥对加密和解密纯文本文件 RSA 密钥是使用 ssh keygen 生成的 并像往常一样存储在 ssh 中 我无法理解如何使用 Go 语言 crypto 和 crypto rsa 包来做到这一点
  • MySQL 缓存和日期函数

    我曾经在性能博客中读到 最好使用 PHP 的日期函数在 MySQL 查询中设置日期 而不是使用像 curdate 这样的 mysql 日期函数 因为 mysql 可以缓存查询或结果或类似的东西 有人对此有任何见解吗 它有水分还是毫无根据 e
  • R-plotly-结合气泡和等值线图

    我想以情节方式将两种类型的地图组合在一张地图中 即气泡图和分区统计图 目标是通过将鼠标悬停在地图上来显示国家级别 分区统计图 以及城市级别 气泡 的人口规模 分区统计图的绘图示例代码如下 library plotly df lt read
  • 'Room' 类是抽象的;无法实例化

    我有一个抽象类Room它有子类Family and Standard 我创造了room new ArrayList
  • 2 Kubernetes pod 在不知道暴露地址的情况下进行通信

    我计划部署 2 个带有 NodePort 服务的 kubernetes pod 将它们暴露到网络中 现在我希望 pod 1 能够通过他的服务访问 pod 2 问题是我编写部署文件 但我不知道 pod 2 将从集群获取的 IP 地址 但我需要
  • WPF:使用虚拟键盘

    我创建了一个虚拟键盘用户控件 可以在应用程序中跨多个窗口使用 我想知道当按下某个键时如何将其输入到窗口中的文本框中 我正在寻找的是这样的 private void keyboardKey Click object sender Routed
  • Angular2 - 将文本框聚焦于组件加载

    我正在 Angular2 Beta 8 中开发一个组件 该组件有一个文本框和一个下拉列表 我想在组件加载或下拉列表更改事件后立即将焦点设置在文本框中 我如何在 Angular2 中实现这一点 以下是该组件的 Html div div