12

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)

taras-d
  • 1,789
  • 1
  • 12
  • 29

3 Answers3

17

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.

taras-d
  • 1,789
  • 1
  • 12
  • 29
  • Could you possibly share the URL of where you found these? I'm looking for a more extensive list. – Gary Aug 07 '18 at 06:49
3

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
  }
}
Arg0n
  • 8,283
  • 2
  • 21
  • 38
  • If this works I love it. I was going to suggest having a keydown event that checks for shift and sets a boolean to true. Then a key up function that sets that boolean to false if it was shift that was keyed up, but if it's the arrow key and the boolean is set to true then that's your shift + up situation. – Kevin Aug 17 '17 at 14:27
  • 1
    It doesn't work. The function called only when I press `up`. It doesn't called when press `shift` + `up`, so I can't check if `event.shiftKey` is true. – taras-d Aug 17 '17 at 14:30
  • 1
    @taras-d You are correct, no event was triggered when using `(keyup.arrowup)` while holding down `shift` unfortunately. I updated my answer. – Arg0n Aug 17 '17 at 14:38
  • 1
    @taras-d Then write it as an answer. – Arg0n Aug 18 '17 at 08:09
2

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.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
  • This is one of the possible solutions. But maybe there is a way to write something like this `(keyup.shift+up)="..."` !? – taras-d Aug 17 '17 at 14:41
  • You have to put the `shift + up` logic in the method as i did. I am using the same in my project. See my another answer for a generic mac and windows solution for Ctrl + S: https://stackoverflow.com/a/45569055/1791913 – FAISAL Aug 17 '17 at 14:42
  • 1
    I found the way I want to do it. I updated my question. – taras-d Aug 17 '17 at 14:59
  • @taras-d interesting, neat solution :) – FAISAL Aug 17 '17 at 15:02
  • however, that solution will only be restricted to windows ! – FAISAL Aug 17 '17 at 15:03
  • What do you mean? `(keyup.shift.arrowup)` - listen to event within element. `(window:keyup.shift.arrowup)` - listen to event within window. – taras-d Aug 17 '17 at 15:08
  • I mean that, there is no control key in mac, metaKey is used instead. So any event that you specify with the `control` key will not work on mac. – FAISAL Aug 17 '17 at 15:10
  • I understand. I can't check, but I think `(keyup.meta.shift.arrowup)` should work on the mac. – taras-d Aug 17 '17 at 15:16