event.altKey 没有返回任何内容答案

【问题标题】：event.altKey is not returning anythingevent.altKey 没有返回任何内容
【发布时间】：2018-07-30 09:47:29
【问题描述】：

如果按下 Alt 按钮，我正在尝试显示/隐藏 div。我正在听一个按键并使用event.altKey 来确定是否按下了alt/option。但这不起作用。所以我记录了这个事件。

@HostListener( 'document:keypress', [ '$event' ])
handleKeyboardEvent( event: KeyboardEvent ) {
    console.log( event.altKey );
}

在上面的代码中，如果我按下任何数字、字母或符号，它将按预期打印“假”。但是当我按 Alt、Ctrl、Shift、Tab 时，什么也没有发生。它不打印真假。

我也尝试打印键码。它会打印除“Alt、Ctrl、Shift、Tab”以外的所有内容。

我在这里做错了什么？

【问题讨论】：

你能试试 event.which || event.keyCode ?

标签： javascript angular

【解决方案1】：

Keypress 未检测到某些键，并且 alt 必须是这些键之一。我会尝试使用另一个名为onkeydown 的事件。它可以检测更多的键。以下是关于 keydown 事件的更多信息：https://developer.mozilla.org/en-US/docs/Web/Events/keydown

【讨论】：

keypress 也会重复触发。

【解决方案2】：

alt键功能可以使用以下功能：

function isKeyPressed(event) {
    if (event.altKey) {
        console.log("The ALT key was pressed!");
    } else {
        console.log("The ALT key was NOT pressed!");
    }
}

在你的html中使用onkeydown="isKeyPressed(event)"作为标签

【讨论】：

【解决方案3】：

您可以在@Component 装饰器中尝试host property。

@Component({
  ...
  host: {
    '(document:keypress)': 'handleKeyboardEvent($event)'
  }
})
export class AppComponent {
  handleKeyboardEvent(event: KeyboardEvent) {
    console.log(event);
  }
}

Angular 建议在主机属性上使用 @HostListener 装饰器 https://angular.io/guide/styleguide#style-06-03

【讨论】：