如何检查按钮是否有焦点？答案

【问题标题】：How to check if button has focus?如何检查按钮是否有焦点？
【发布时间】：2019-01-25 13:52:16
【问题描述】：

我有一个表单，我想使用 ENTER 键在各个字段之间切换，但我也想在使用 ENTER 键时提交表单当我突出显示（通过 tab 键/进入）一个 send 按钮时。

有什么方法可以判断回车按钮是否被聚焦？

我在想这样的事情：

<form (keydown.enter)="isSendFocussed($event)">
    <input #input1> <!-- input 1 -->
    <input #input2> <!-- input 2 -->
    <input #input3> <!-- input 3 -->
    <button #myButton (click)="sendForm()">Send</button>
</form>

然后我会为isSendFocussed(event) 函数做一些事情，例如：

@ViewChild('myButton') btn: ElementRef<HTMLInputElement>

isSendFocussed(event) {
    // if (!button is focussed) {
    //     block default functionality and tab across
    // } else {
    //     send form
    // }
}

【问题讨论】：

标签： html angular typescript button

【解决方案1】：

您可以像这样使用焦点和模糊事件：

<button
   (click)="onFavPopupClose()"
   (focus)="isBtnPopCloseFocused = true" 
   (blur)="isBtnPopCloseFocused = false">
</button>

【讨论】：

【解决方案2】：

您可以在按钮元素上使用(focus) 来检查它是否处于焦点状态。

模板

<button (focus)="isFocus($event)"></button>

组件

isFocus(evt): void {
  console.log('Button is focused', evt);
}

【讨论】：