考虑以下 plunker
当 (focus)
我想要以下行为时,我有一个将扩展到下拉列表中的输入
- 当输入聚焦时,用户点击任何不聚焦的地方
在
dropdown
或input
中,dropdown
应该收缩 - 当输入获得焦点时,用户点击
dropdown
,dropdown
应该保持展开状态
现在,当用户点击输入并点击下拉菜单时,下拉菜单会收缩。
这是我的引用代码
@Component({
selector: 'my-app',
template: `
<div class="wrapper">
<input [(ngModel)]="searchText"
tabindex="0"
placeholder="name"
(focus)="inputShow()"
(blur)="inputHide()"
>
<div class="option-wrapper"
[hidden]="isHideList()"
tabindex="0"
(focus)="inputShow()"
(blur)="inputHide()">
<li class="options"
*ngFor="#option of optionlist">
<div >{{option['name']}}</div>
</li>
</div>
</div>
`
})
export class App {
optionlist = [{'name': '1'}, {'name': '2'}]
inputShow() {
this.inputFocus = true;
}
inputHide(){
this.inputFocus= false;
}
isHideList() {
return !this.inputFocus;
}
}
接近预期行为的一种方法是带走
(blur)="inputHide()"
在 input
上,例如 this
但现在当我点击 input
并点击 input
和 dropdown
之外的任何地方时,dropdown
不会收缩
只有当我点击input
然后点击dropdown
然后其他地方才会dropdown
contract
有人可以给我一些见解吗?
谢谢
最佳答案
监听窗口点击事件,仅当 event.target
位于包装器之外时才隐藏下拉列表:
@Component({
selector: 'my-app',
template: `
<div #wrapper class="wrapper">
<input #input [(ngModel)]="searchText"
tabindex="0"
placeholder="name"
(focus)="inputShow()"
>
<div class="option-wrapper"
[hidden]="isHideList()"
tabindex="0"
(focus)="inputShow()"
>
<li class="options"
*ngFor="#option of optionlist">
<div >{{option['name']}}</div>
</li>
</div>
</div>
`
})
export class App {
@ViewChild('wrapper') wrapper:ElementRef;
@ViewChild('input') input:ElementRef;
@HostListener('window:click', ['$event'])
clickHandler(event) {
var parent = event.target;
while(parent != this.wrapper.nativeElement && parent != document) {
parent = parent.parentNode;
}
if(parent == document) {
this.inputHide();
}
}
optionlist = [{'name': '1'}, {'name': '2'}]
inputShow() {
this.inputFocus = true;
}
inputHide(){
this.inputFocus= false;
}
isHideList() {
return !this.inputFocus;
}
}
关于javascript - 在 angular2 中的另一个元素的 `focus` 之后不能为 `blur`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36590292/