将重点放在< input>元素 [英] Set focus on <input> element
本文介绍了将重点放在< input>元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Angular 5处理前端应用程序,我需要隐藏搜索框,但是单击按钮时,搜索框应显示并聚焦.
I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused.
我已经尝试使用指令或类似方法在StackOverflow上找到一些方法,但无法成功.
I have tried a few ways found on StackOverflow with directive or so, but can't succeed.
这是示例代码:
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
</div>
<button (click) ="showSearch()">Show Search</button>
<p></p>
<form>
<div >
<input *ngIf="show" #search type="text" />
</div>
</form>
`,
})
export class App implements AfterViewInit {
@ViewChild('search') searchElement: ElementRef;
show: false;
name:string;
constructor() {
}
showSearch(){
this.show = !this.show;
this.searchElement.nativeElement.focus();
alert("focus");
}
ngAfterViewInit() {
this.firstNameElement.nativeElement.focus();
}
搜索框未设置为焦点.
我该怎么做?
推荐答案
像这样修改show搜索方法
Modify the show search method like this
showSearch(){
this.show = !this.show;
setTimeout(()=>{ // this will make the execution after the above boolean has changed
this.searchElement.nativeElement.focus();
},0);
}
这篇关于将重点放在< input>元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文