单击禁用按钮后未处理Keydown事件

Question

在Angular中，我使用@HostListener来侦听页面上的keydown事件。我还有一个按钮，点击后会被禁用。

我的问题是，在Firefox中，我按下按钮后不会得到keydown事件。我认为这是因为整个页面失去了焦点。Chrome中没有这个问题。

下面是一个行为示例：

import { Component, NgModule, HostListener } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
<button [disabled]="disabled" (click)="disabled = true">Click me</button>
<p>{{key}}</p>
`,
})
export class App {
disabled: boolean = false;
key: string;
@HostListener('document:keydown', ['$event'])
private handleKeyboardEvent(event: KeyboardEvent) {
this.key = event.key;
}
}

禁用该按钮后，如何继续获取keydown事件？

Plunker工作示例

Answer 1

我无法使用plunker在chrome上进行复制。你的浏览器是什么？

你可以试着改变焦点。类似于：

import { Component, NgModule, HostListener } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
<button [disabled]="disabled" (click)="disable()">Click me</button>
<p>{{key}}</p>
`,
})
export class App {
disabled = false;
key: string;
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
this.key = event.key;
}
disable() {
this.disabled = true;
document.activeElement.blur();
}
}