我试图跟踪用户使用键盘按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);
}
它在我这样做时有效:
@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
适用于当前元素。
尽管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。