Multiple key binding on (keydown) event in angular 6

Question

I have used (keydown) event in angular 6 to bind key inputs

So on enter of 'Tab' and 'Enter' key i have to do my functionality and added a event.prevent default

But when Shift + Tab is entered it is also preventing the event

.html

<input type="text" [(ngModel)]="Result1 (keydown)="onKeydownMain($event)"  >

I dont want (keydown.shift.tab) event seperate..

.ts

public onKeydownMain(event): void {
    if (event.key === "Enter" || event.key === "Tab") {
                event.preventDefault();
                   // My Functionality goes here
    }
}

But the problem is when Shift + Tab is pressed , event is fired and functionality goes on, which i don't want.

How can i go this

I just want Shift + Tab to perform its default functionality on this input.

Solution

You need to remove the shift in the if condition like this:

public onKeydownMain(event): void {
       if (!event.shiftKey && (event.key === "Enter" || event.key === "Tab")){
                event.preventDefault();
                   // My Functionality goes here
        }
    }

You can refer to https://www.w3schools.com/jsref/obj_keyboardevent.asp for KeyboardEvent

Comments

[Parshuram Kalvikatte]

Thanks,Sometimes finding simple things we think a lot..That works thanks..

[Dharman]

When providing an answer please explain why this is the best approach. Answers which just tell the OP to perform some action will not teach them anything. Use links to online documentation to support your claims (e.g. MDN).

[JFPicard]

You only get a keyCode with the event. So shiftKey, altKey and ctrlKey is the way to find if a control key was pressed.