Capture keypress/keyup/keydown on any element using Angular directive

Question

I need to capture keypress/keydown/keyup on any element. I did use a directive to handle it. So I defined a KeyPressedDirective :

 import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appKeyPressed]' }) export class KeyPressedDirective { constructor(elRef:ElementRef<HTMLElement>) { elRef.nativeElement.addEventListener('keypress',e=>console.log(e)); } }

but by using the directive nothing happen and event did not capture.

 <p appKeyPressed>Capture keypoard events</p>

How should I capture keyboard events?

Here is a StackBlits link: KeyPressDirective

keypress/keydown/keyup, These events will work on input element. Please try — JsNgian
– JsNgian, Commented Sep 19, 2021 at 6:00

Arsalan · Accepted Answer · 2022-06-26 10:32:18Z

To use events keypress/keydown/keyup on any element, the element should have the attribute tabindex. So changing the directive to this will solve the problem:

import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appKeyPressed]' }) export class KeyPressedDirective { constructor(elRef:ElementRef<HTMLElement>) { elRef.nativeElement.setAttribute('tabindex',0); // It can be checked that element has `tabindex` already elRef.nativeElement.addEventListener('keypress',e=>console.log(e)); } }

Here is StackBlitz link: StackBlitz

Pawan Kumar · Accepted Answer · 2021-09-19 06:06:18Z

U can use @HostListener(EVENT_NAME, [arguments you want to pass]) & BTW keypress means you are expecting Keyboard key press into an input, as I can see you are using a p paragraph I changed the code to use mouseover to demo @HostListener

import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[appKeyPressed]' }) export class KeyPressedDirective { constructor() {} @HostListener('mouseover', ['$event']) customMouseOver($event) { console.log($event); } }

Apoorva Chikara · Accepted Answer · 2021-09-19 10:38:03Z

You need to understand when you can capture the keyEvents. Key events can be keyUp or KeyDown only triggered in the input or text field when user uses the keyboard.

So, this directive can be useful on input or textarea.

<input appKeyPressed/> <textarea appKeyPressed> </textarea>

How should I capture keyboard events?

Applying appKeyPressed on p tag won't give any results as there is no keyboard happening on it instead you can use mouse events like mouse-move-in or mouse-move-out. For that you can add HostListener too, but you can inbuilt methods:

<div (mouseover)="doSomething(whencursoroverParagraph)" (mouseout)="doSomething(whencursoisoutFromParagraph)"> </div>

JsNgian · Accepted Answer · 2021-09-19 06:16:19Z

0

<input appKeyPressed/>

This will work with keypress event, Please try

answered Sep 19, 2021 at 6:16

JsNgian

8356 silver badges19 bronze badges

Collectives™ on Stack Overflow

Capture keypress/keyup/keydown on any element using Angular directive

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related