CODEWITHSUNDEEP
javascriptangulartypescriptkeyboard-shortcutskeyboard-events
neukoellnjenny
neukoellnjenny

Reputation: 180

Event Listening for Key Combination not working

I am trying to implement several hotkeys into an application. I want to have key combination from alt+1 till alt+9.

The alt+1 combination is working like a charm (breakpoint reached), but alt+2 is not working (breakpoint not reached).

Can someone explain that?

@HostListener('document:keydown.alt.1', ['$event'])
  doThis(e: KeyboardEvent) {
    // action();
    e.preventDefault();
  }

@HostListener('document:keydown.alt.2', ['$event'])
  doThat(e: KeyboardEvent) {
    // action();
    e.preventDefault();
  }

Upvotes: 2

Views: 1417

Answers (3)

hreimer
hreimer

Reputation: 784

To add for my specific use case, needing a keycombo with Alt that works on Mac and Windows:

@HostListener("window:keydown", ["$event"])
  public onKeydownHandler(event: KeyboardEvent) {
    event.preventDefault();
    if (event.altKey && event.code === "KeyL") { // using .code, as .key value can change depending if alt/shift/ctrl/cmd are pressed
      // do your thing
    }
  }

My preferred approach, listening for document:keydown.alt.l didn't work, I suspect because Alt + L on a Mac keyboard creates a special character ¬ that is not recognised by the HostListener

Upvotes: 1

SomeStudent
SomeStudent

Reputation: 3048

So I am not able to reproduce the issue, couple of things to note:

  • Make sure you are actually focused on the page itself

  • check your console for any JS errors as that will stop most things from continuing to execute as expected.

  • As another option you can also try listening to the key events like so:

    @HostListener('document:keydown', ['$event']) onKeyDown(e) {
  if (e.altKey && e.key == 1) {
    console.log('alt and 1');
  } else if (e.altKey && e.key == 2) {
    console.log('alt and 2');
  }
}

Stackblitz: https://stackblitz.com/edit/angular-uc7ssc?file=src/app/app.component.ts

Where you have one HostListener for the keydown event and we are filtering for the actions that we want.

Edit 2: I've made an updated stackblitz showing a possible way to handle multiple key strokes (https://stackblitz.com/edit/angular-7lrjat?file=src/app/app.component.ts). The big picture idea here is that we create a Stack a simple data structure that follows the FILO principle (First in Last Out, think of stacking plates. The first plate is the last one you can access) and we create a timeout function to let the user have a chance to quickly input their keys before we execute the code.

You could also avoid that timeout, if you'd like, and modify the code a bit by checking to make sure that the second key is a number or not. By the way, that is what the built in method isFinite does. Now in TypeScript they haven't set it up to where it can accept a string as an input, thus the preceding + in order to cast the string value of lastKey.key.

I hope this helps!

Upvotes: 1

Max Samusevich
Max Samusevich

Reputation: 123

event.preventDefault();, probably, should go before custom behavior, not after

Upvotes: 0

Related Questions