Как проверить, имеет ли кнопка фокус?

Question

У меня есть форма, которую я хочу использовать для ввода по полям клавиши ENTER , но я также хочу отправить форму при использовании клавиши ENTER , когда явыделил (вкладкой / введением) кнопку 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
    // }
}

Answer 1

Вы можете использовать (focus) на вашем элементе кнопки, чтобы проверить, находится ли он в своем фокусированном состоянии.

Шаблон

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

Компонент

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

Answer 2

Вы можете использовать события фокусировки и размытия следующим образом:

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