조합 키 누름을 분석하는 HostListener

조합 키 누름을 분석하는 HostListener

사용자가 키보드를 사용하여 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);
}

Frank Modica의 솔루션은 작동하지만 Angular의 주요 이벤트 필터링 및 유사 이벤트를 사용하는 것이 더 읽기 쉽고 깨끗한 솔루션입니다.

@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 />

유사 이벤트가 작동하는 방법에 대한 더 많은 예는 여기에서 찾을 수 있습니다.

이 작업을 수행하면 작동합니다.

@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현재 요소에 대해 작동합니다.

언급URL : https://stackoverflow.com/questions/44369704/hostlistener-to-analyse-combination-key-press