Question

我有一个表单，我想使用 ENTER 键在各个字段之间切换，但是我也想在使用 ENTER 键时提交表单当我突出显示（通过点击/输入）发送按钮

时。

有什么办法可以确定输入按钮是否已聚焦？

我在想类似的东西：

<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
    // }
}

Answer 1

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

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

Answer 2

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

模板

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

组件

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

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

2 个答案: