HostListener分析组合键按下

问题描述 投票:4回答:2

我试图跟踪用户使用键盘按Shift + Tab组合键,但我无法触发该事件

@HostListener('keyup', ['$event'])
@HostListener('keydown', ['$event'])

onkeyup(event) {
  if (event.keyCode == 16 && event.keyCode == 9) {
    this.isShift = true;
    console.log("On Keyup " + event.keyCode);
  }
}

onkeydown(event) {
  console.log("On KeyDown" + event.keyCode);
}
angular typescript
2个回答
8
投票

它在我这样做时有效:

@Directive({
  selector: '[test-directive]'
})
export class TestDirective {
  @HostListener('keydown', ['$event']) onKeyDown(e) {
    if (e.shiftKey && e.keyCode == 9) {
      console.log('shift and tab');
    }
  }
}

<input type="text" test-directive />

请注意,keyup可能很棘手,因为tab可能会使元素失焦。所以当keyup开火时,你可能会在下一个元素上,所以keyup实际上可能会触发该元素。所以这取决于你需要什么。但keydown适用于当前元素。


3
投票

尽管Frank Modica的解决方案有效,但使用Angular's key event filtering and pseudo-events将是一个更易读,更清晰的解决方案:

@Directive({
    selector: '[keyHandler]'
})
export class KeyHandlerDirective {

    @HostListener('keydown.shift.tab', ['$event'])
    onKeyDown(e) {
        // optionally use preventDefault() if your combination
        // triggers other events (moving focus in case of Shift+Tab)
        // e.preventDefault();
        console.log('shift and tab');
    }
}

// in template:
<input type="text" keyHandler />

有关伪事件如何工作的更多例子可以找到here

© www.soinside.com 2019 - 2024. All rights reserved.