javascript - How can I detect when a key is pressed or released in Angular 'without input'? - Stack Overflow

admin管理员组

文章数量:1389758

I have a boolean variable which is by default false. So now, I want the variable to bee 'true' when a key is pressed and 'false' the key is released.

Example: When I press the shift key, the declared variable should return true and when I released it, the variable should return false.

I know Angular JS has two keyboard events (keydown and Keyup) but as long as I know, in most cases, they're only used with 'input' fields. So is there an alternative to utilize the methods without an input field?

I have a boolean variable which is by default false. So now, I want the variable to bee 'true' when a key is pressed and 'false' the key is released.

Example: When I press the shift key, the declared variable should return true and when I released it, the variable should return false.

I know Angular JS has two keyboard events (keydown and Keyup) but as long as I know, in most cases, they're only used with 'input' fields. So is there an alternative to utilize the methods without an input field?

• javascript
• angular
• typescript

Share Improve this question Follow edited May 11, 2020 at 11:31 Hashmat asked Oct 7, 2019 at 12:02 HashmatHashmat 76711 gold badge88 silver badges1818 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

I would use @HostListener decorator within your ponent:

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

@Component({
  ...
})

export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

Put your conditions inside that block & you'll be gtg. There exists other ways too just so you know.

本文标签： javascriptHow can I detect when a key is pressed or released in Angular 39without input39Stack Overflow