如何通过 angular 检查空格键事件？

Question

我有一个 angular 模板，其中使用了以下语法：

(click)="dosomething()"

效果很好。我现在需要在 return 或 space 栏上触发相同的事件。我为 return 添加了这个：

(keyup.return)="dosomething()"

这也很好用。

达到 spacebar 但我无法让它工作。我都试过了...

(keyup.space)="dosomething()"

...以及...

(keyup.spacebar)="dosomething()"

...但两者都不起作用。在这两种情况下，按 space 只是默认浏览器行为并向下滚动页面。

keyup 甚至似乎是记录在案的解决方案（至少就我所能找到的而言），所以我很困惑我在这里可能遗漏了什么。

Answer 1

要达到预期结果，请使用 (keyup.Space) 而不是 (keyup.space)（'S' 大写）

<input (keyup.Space)= "doSomething()">

供参考的工作代码示例- https://stackblitz.com/edit/angular-dmvr52?file=src/app/app.component.html

Answer 2

您可以在组件而不是 html 模板中执行此操作：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-page-viewer',
  templateUrl: './page-viewer.component.html',
  styleUrls: ['./page-viewer.component.css']
})

export class PageViewerComponent implements OnInit, OnDestroy {
  @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    switch (event.key) {
      case 'ArrowLeft':
        // trigger something from the left arrow
        break;
      case 'ArrowRight':
        // trigger something from the right arrow
    }

    constructor(){}
  }

Answer 3

尽管这是一个老问题，但这是我的搜索返回的第一个 Google 结果。所以我想post一个可能对找到它的人有帮助的答案。

诀窍是使用 keydown，因此您可以在 space 键发生默认操作之前阻止它。如果您使用 keyup，则默认操作已经发生。

您可以在 HTML 模板或 TypeScript 中使用 preventDefault。我更喜欢在 HTML 模板中这样做，因为它很容易让您仅在需要时在 keydown.space 事件侦听器中使用 preventDefault。

在 HTML 模板中使用 preventDefault()

HTML:

(keydown.space)="doSomething(); $event.preventDefault()"

在 TypeScript 中使用 preventDefault()

HTML:

(keydown.space)="doSomething($event)"

TS:

doSomething(event: Event): void {
  window.alert('You did something');
  event.preventDefault();
}

如何通过 angular 检查空格键事件？

How to check for spacebar key event via angular?

javascript

angular

keyup