Why `(keydown.code.alt.leftshift)` does NOT match when pressing alt and left shift in Angular?...

issue

abstract


As title said.

details


I followed the Angular tutorial -- Adding event listeners#Using key modifiers.

1. I adopt third code snippets

<!-- Matches shift and enter -->
<input type="text" (keyup.shift.enter)="updateField($event)" />


as example project named Using key modifiers ex3/app-project

In this example project, it works as I expected.

I set the template field as following code snippets (which means that it will call the upadateField callback function iff one pressed shift+enter key at same time.

<!-- Matches shift and enter -->
<input type="text" (keyup.shift.enter)="updateField($event)" />


and the upadateField callback function is defined as follows.

updateField(event: Event): void {
console.group('updateField in AppComponent class');
console.log('The user pressed shift and enter at same time in the text field.');
console.groupEnd();
}


The full code in app.component.ts in this example project is as follows:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template:`
<!-- Matches shift and enter -->
<input type="text" (keyup.shift.enter)="updateField($event)" />
`
})
export class AppComponent {
title = 'app-project';
updateField(event: Event): void {
console.group('updateField in AppComponent class');
console.log('The user pressed shift and enter at same time in the text field.');
console.groupEnd();
}
}


Hierarchy

Demo project of Accessing the event argument ex3 in Angular

1. On the other hand, I adopt forth code snippets

<!-- Matches alt and left shift -->
<input type="text" (keydown.code.alt.leftshift)="updateField($event)" />


as example project named Using key modifiers ex4/app-project

In this example project, it DIDN'T work as I expected.

I set the template field as following code snippets (which means that it will call the upadateField callback function iff one pressed alt+ left shift key at same time.

<!-- Matches shift and enter -->
<input type="text" (keyup.shift.enter)="updateField($event)" />


and the upadateField callback function is defined as follows.

updateField(event: Event): void {
console.group('updateField in AppComponent class');
console.log('The user pressed enter in the text field.');
console.groupEnd();
}


The full code in app.component.ts in this example project is as follows:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template:`
<!-- Matches alt and left shift -->
<input type="text" (keydown.code.alt.leftshift)="updateField($event)" />
`,
})
export class AppComponent {
title = 'app-project';
updateField(event: Event): void {
console.group('updateField in AppComponent class');
console.log('The user pressed enter in the text field.');
console.groupEnd();
}
}


Hierarchy

Demo project of Accessing the event argument ex4 in Angular (problematic)

Why?

appreciation


Any replies and tips about this issue will be highly appreciated.

other info

Framework


Angular with SaaS option.

IDE


VSC

full code


See above details section.

demo


See above details section.

What did I try?

1. Follow the instructions on Angular tutorial -- Adding event listeners#Using key modifiers

P.S.

I fix the code from

updateField(event: KeyboardEvent)


to

updateField(event: Event)


to fix the other error when building the server.
​

What was I expecting?


I was expecting that, in Using key modifiers ex4/app-project, it can work fine (here, it is output The user pressed enter in the text field. on the console on dev tool of web page iff I pressed alt + left shift key at same time (I typo the output message, however, it does NOT important.))

1th update


I try to rewrite the code with another way in example project named Using key modifiers ex5/app-project

Here is my full code in app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<input type="text" (keyup)="updateField($event)" />
`,
})
export class AppComponent {
title = 'app-project';
updateField(event: KeyboardEvent): void {

if (event.altKey && event.key === 'ShiftLeft') {
console.group('updateField in AppComponent class when the user pressed alt and left shift key at same time in the text field.');
console.log('The user pressed alt and left shift key at same time in the text field.');
console.groupEnd();
}
}
}


Demo project of Accessing the event argument ex5 in Angular (problematic)

And it DIDN'T work as I expected. I expected that output The user pressed alt and left shift key at same time in the text field. on the console on dev tool of web page iff I pressed alt + left shift key at same time.

2th update


Sorry, I forgot to say that the value of key code of left shift is ShiftKey, according to table under section Code values on Windows from the Code values for keyboard events (MDN)



Continue reading...