Angular에서 Keyup 및 Keydown 이벤트에 특정 키를 바인딩하는 방법

소개

Angular 2+ 템플릿에서 keyup 또는 keydown 이벤트에 바인딩할 때 키 이름을 지정할 수 있습니다. 이렇게 하면 이벤트에 적용할 필터가 적용되므로 특정 키를 누를 때만 트리거됩니다.

이 문서에서는 keyup 및 keydown 이벤트를 수신할 때 키 이름을 사용하는 방법을 배웁니다.

키 이름 사용

먼저 키 이름을 사용하지 않는 예를 살펴보겠습니다.

사용자가 정보를 제공할 <input> 요소가 있다고 가정해 보겠습니다. 사용자가 ENTER 키를 누를 때 콘솔에 로그인하려고 합니다.

<input (keydown)="onKeydown($event)">

onKeydown()을 실행하는 keydown 이벤트 핸들러를 바인딩했습니다.

다음으로 ENTER 키 누르기를 처리하는 onKeydown() 함수를 작성해 보겠습니다.

onKeydown(event) {
  if (event.key === "Enter") {
    console.log(event);
  }
}

모든 keydown 이벤트에서 event.key 값이 Enter인지 확인하는 검사가 수행됩니다. true이면 이벤트를 콘솔에 기록합니다.

이제 동일한 예이지만 이벤트에 ENTER 키 이름이 추가되었습니다.

<input (keydown.enter)="onKeydown($event)">

onKeydown()을 실행하는 keydown.enter 의사 이벤트 핸들러를 바인딩했습니다.

다음으로 onKeydown() 함수를 다시 작성해 보겠습니다.

onKeydown(event) {
  console.log(event);
}

Angular의 keydown.enter 의사 이벤트에 의존함으로써 더 이상 event.key 값이 Enter인지 수동으로 확인할 필요가 없습니다. .

특수 수정자 키 및 조합 사용

이 기능은 ENTER, 이스케이프(ESC), SHIFT, ALT, TAB, BACKSPACE 및 명령(메타):

그러나 문자, 숫자, 화살표 및 기능 키(F1 ~ F12)에도 사용할 수 있습니다.

다음은 Angular가 필터링할 수 있는 전체 키 값 목록입니다.

키 조합이 트리거된 경우에만 키를 함께 결합하여 이벤트를 트리거할 수도 있습니다. 다음 예에서는 CONTROL 및 1 키를 동시에 누르는 경우에만 이벤트가 트리거됩니다.

<input (keyup.control.1)="onKeydown($event)">

다음은 무엇이 가능한지에 대한 아이디어를 제공하는 몇 가지 예입니다.

결론

Angular 2+ 템플릿이 keyup 및 keydown 유사 이벤트로 키 이름 필터링을 지원하는 방법을 배웠습니다.

이 접근 방식의 이점에는 키 값에 대한 반복적인 수동 검사가 적고 수정자 키와 수정자가 아닌 키 조합을 처리하는 것이 포함됩니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.