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.

You'll have to be explicit and tell it to check if Shift is pressed. — user4676340
– user4676340, Commented Oct 5, 2018 at 12:40

JFPicard · Accepted Answer · 2018-10-05 12:45:28Z

4

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

answered Oct 5, 2018 at 12:45

JFPicard

5,1973 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parshuram Kalvikatte Over a year ago

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

Prem · Accepted Answer · 2018-10-05 13:11:55Z

0

Try avoiding the shift keyevent value 16 in your code. event.which is used to display the keyevent value.

alert(event.which);
event.preventDefault();
if (event.keyCode!=16 && (event.keyCode === 13 || event.keyCode === 9 )) {
    alert("Pressed enter");
}

answered Oct 5, 2018 at 13:11

Prem

511 bronze badge

2 Comments

Dharman Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

Multiple key binding on (keydown) event in angular 6

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related