I am using the following method to detect keypresses on a page. My plan is to detect when the Escape key is pressed and run a method if so. For the moment I am just attempting to log which key is pressed. However the Escape key is never detected.
@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
console.log(event);
let x = event.keyCode;
if (x === 27) {
console.log('Escape!');
}
}
Try it with a keydown or keyup event to capture the Esc key. In essence, you can replace document:keypress with document:keydown.escape:
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
console.log(event);
}
It worked for me using the following code:
const ESCAPE_KEYCODE = 27;
@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
if (event.keyCode === ESCAPE_KEYCODE) {
// ...
}
}
or in shorter way:
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
// ...
}
event.key == "Escape"The old alternatives (.keyCode and .which) are Deprecated.
@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
if (event.key === "Escape") {
// Do things
}
}