angular4获得焦点事件_Angular 4 文本框自动获取焦点二

Angular是不推荐直接通过DOM操作获取元素的，要操作元素就通过@ViewChild装饰器。

在HTML中对元素添加引用myInput：

在ts中可以通过ViewChild获取指定元素的引用：

import { ViewChild } from '@angular/core';

@ViewChild('myInput') input;

获取到对应元素的引用后，你想添加焦点，如下：

this.input.nativeElement.focus()

nativeElement获取的是原始DOM元素，至于你想在哪里自动获取焦点，就看你的业务逻辑了，可以配合Angular对应的生命周期使用。

这是在segmentfault上别人给我的答案。

我的业务需求是页面加载完毕就立马给input获取焦点；

所以用到了

ngAfterViewInit()

void {

this.

renderer.

invokeElementMethod(

this.

infocus.

nativeElement,'focus');

}

如果使用实现AfterViewInit，OnDestroy，那么你需要实现接口方法

export class ModalDirective implements AfterViewInit,OnDestroy {

ngAfterViewInit() {

}

ngOnDestroy() {

}

不然会报错

Implement lifecycle hook interface AfterViewInit for method ngAfterViewInit

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250

angular4获得焦点事件_Angular 4 文本框自动获取焦点二相关推荐

原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值
<input type="text" value="请输入关键字" class="gray" id="txtInput&qu ...
文本框焦点事件显示隐藏文本框内容
效果展示: 代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
angular4获得焦点事件_Angular 2 失去焦点事件
描述您可以通过在页面上的输入框之外单击鼠标使输入框失去焦点. 例子下面的例子描述了在Angular 2中的用户对blur事件的输入: Angular 2 User Input On Blur Sy ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
编写一程序，有2个文本框，在第一个文本框中输入一个整数，当焦点从第一个文本框离开时，第二个文本框将显示这个数的绝对值（使用FocusListener）。
编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener). import javax.swing.*; i ...
android activity焦点,android启动activity文本框不获得焦点
在开发中,常常会碰到这种情况,打开一个activity后,第一个文本框自动获得焦点,同时会弹出软键盘输入框,这样很影响用户体验,现在来看解决方法. 我们先来看看为什么会出现上述情况,原因很简单,文本框 ...
[原创]Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)
做一个小程序要用到Flex文本框自动提示的功能,因为时间不是很紧,所以决定自己动手做这个小组件,花了一个晚上的时间终于完成了.贴出来与大家分享一下. 虽然网上有不少这样的组件,但自己动手做可以锻炼下思 ...
java计算两个文本框的值,java 文本框自动获取另外两个文本框的值的乘积
java 文本框自动获取另外两个文本框的值的乘积关注:282 答案:2 手机版解决时间 2021-02-25 21:59 提问者壹玍徴戰何亽陪 2021-02-25 13:53 在panel里 ...
取消Chrome表单文本框自动填充黄色背景色样式
开发后台管理系统或网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问题,把之前查阅的一些资料和自己解决这个问 ...

angular4获得焦点事件_Angular 4 文本框自动获取焦点二

angular4获得焦点事件_Angular 4 文本框自动获取焦点二相关推荐

最新文章

热门文章