我试图通过单击按钮自动聚焦在输入元素上。请参阅打字稿
@ViewChild('envFilter') envFilter: ElementRef;
onFilterSelect() {
this.envFilter.nativeElement.focus();
}
在 HTML 方面,我有以下内容。
<div [ngClass]="isFilterVisible ? 'item item1' : 'item item1 hide'">
<div [@filterAnimation]="isFilterVisible" class="filterWrapper">
<input type="text" class="envFilter" [(ngModel)]="envFilterValue" (keyup)="envFilterChanged(envFilterValue)" #envFilter />
<!-- {{ envFilter.focus() }} -->
</div>
</div>
关于使用{{ envFilter.focus() }}
我能够专注于该字段,但无法专注于任何其他输入框
这里遗漏了一小段 HTML
<div class="pull-right filter-down filter-down-div item item2">
<i *ngIf=" envs.length !=0" role="button" (click)="onFilterSelect(envFilter)" class="filter-icon fas fa-search"
[ngClass]="{'active': isFilterVisible ,'disabled':!isFilterVisible}" role="button"></i>
</div>
该段基本上是一个搜索按钮,单击时会调用前面的 onFilterSelect() 函数
我的代码有问题吗?为什么自动对焦不起作用
我不知道你的问题是否是这个,但请记住,如果你在 *ngIf 中有输入,你需要给 Angular 一个“呼吸”(使用,例如 setTimeout)
一个简单的例子,假设你有
<input *ngIf="visible" [(ngModel)]="variable" #myInput>
<button (click)="focus()">click</button>
You have
visible:boolean=false
@ViewChild('myInput') myinput:ElementRef
如果你写
/**NO WORK***/
focus()
{
this.visible=true;
this.myinput.nativeElement.focus() //<--NOT YET in the DOM
}
你需要写一些类似的东西
focus()
{
this.visible=true;
setTimeout(()=>{
this.myinput.nativeElement.focus()
})
}
这个setTimeout,使第一次重新绘制,然后,使焦点
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)