Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event binding for specific keypress event

Tags:

angular

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)

like image 898
taras-d Avatar asked Aug 17 '17 14:08

taras-d


1 Answers

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.

like image 68
taras-d Avatar answered Sep 28 '22 09:09

taras-d