Question

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

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

在上面的代码中，如果我按下任何数字，字母或符号，它将打印“假”＆＃39;正如所料。但是当我按下Alt，Ctrl，Shift，Tab时没有任何反应。它不会打印出真或假。

我也试过打印键码。除了＆＃54; Alt，Ctrl，Shift，Tab＆＃39;

之外，它会打印所有内容

我在这里做错了什么？

Answer 1

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

Answer 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)"作为标记

Answer 3

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

@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

event.altKey没有返回任何内容

3 个答案: