如何识别按钮元素是焦点

Question

<div class="text-right">
  <th-input-group [(ngModel)]="filter" (keyup)="onInput($event, false, true)" 
       id="filterInput" #filterInput 
       [placeholder]="searchFilterPlaceHolder"></th-input-group>

   <th-button id="btnPopClose" #btnPopClose type="button" class="btn btn-default" 
   (click)="onFavPopupClose()">{{closeButtonText}}
   </th-button>
</div>

我的自定义弹出模式中有上述 html 输入和按钮元素。

不在组件中我正在使用 HostListener 来识别 Tab 键按下。

@ViewChild('filterInput') elementfilterInputRef: any;
@ViewChild('btnPopClose') elementCloseButtonRef: any;

@HostListener('keydown.tab')
onTab() {
if(this.elementCloseButtonRef.hasFocued || 
this.elementfilterInputRef.hasfocued){
this.close();
}
}

我正在尝试使用选项卡导航弹出窗口。我想检查两个元素是否都没有焦点然后关闭弹出窗口。

Answer 1

您可以使用focus 和blur 之类的事件

<th-button id="btnPopClose" #btnPopClose type="button" class="btn btn-default" 
   (click)="onFavPopupClose()"
   (focus)="isBtnPopCloseFocused = true" 
   (blur)="isBtnPopCloseFocused = false">{{closeButtonText}}
</th-button>