时间戳

首页 > 解决方案 > 单击禁用按钮后未处理 Keydown 事件

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

问题描述

在 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 示例

标签： angular

解决方案

我无法使用 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();
  }
}

推荐阅读