CODEWITHSUNDEEP
angular
taras-d
taras-d

Reputation: 1827

Event binding for specific keypress event

In Angular I can write <input (keyup.enter)"onEnter($event)"> to detect when user press Enter key.

The same I can do with other keys esc, space, shift etc.

But how to detect when user press shift + up?

Is there a list with supported key combinations? (I could'n find any in official docs)

Upvotes: 12

Views: 11398

Answers (3)

taras-d
taras-d

Reputation: 1827

After some research I found neat way to do it:

<!-- Listen to Shift + Up -->
<input (keyup.shift.arrowup)="...">

<!-- Listen to Ctrl + Shift + Down -->
<input (keyup.control.shift.arrowdown)="...">

<!-- Listen to Esc within window -->
<div (window:keyup.esc)="...">

UPDATE

After exploring angular sources (here and here).

It turns out that general syntax for such event names is: eventname.modifier.key.
Where:
- eventname: keydown or keyup
- modifier: alt, control, meta or shift (can be more than one)
- key: key from KeyboardEvent.key property

Examples: keyup.control.z, keyup.control.backspace, keyup.shift.pageup, keyup.alt.dot.

Note that some combination may not work, e.g. keyup.shift.tab.

Upvotes: 17

Arg0n
Arg0n

Reputation: 8423

You can use (keyup) and check the event for which key was pressed, and for shiftKey:

HTML

<input type="text" (keyup)="myFunc($event)"/>

Function inside Component

private myFunc(event: KeyboardEvent): void {
  if (event.key === 'ArrowUp' && event.shiftKey) {
    // Your code
  }
}

Upvotes: 3

FAISAL
FAISAL

Reputation: 34673

Yes, you can achieve it like this: 

<input (keyup)="onKeyUp($event)">

.. and in your typescript code: 

onKeyUp($event): void { 
    if ($event.shiftKey && $event.which === 38) {
        // Place your logic here
    } 
}

Here is a link to working PLUNKER DEMO.

Upvotes: 2

Related Questions