Angular에서 CAPS-LOCK 켜기/끄기 이벤트 처리

이것은 흥미롭지만 매우 일반적으로 예상되는 사용 사례입니다. 특히 암호를 입력하는 동안 CAPS-LOCK이 켜져 있음을 사용자에게 경고하여 사용자가 이를 알고 필요한 경우 변경할 수 있도록 합니다.

아니르밤 / ng-capslock-데모

CAPS-LOCK-ON/OFF 메시지를 표시하는 방법을 보여주는 Angular 13.3.0 애플리케이션

이 데모에서 처리되는 몇 가지 시나리오가 있습니다.

사용자가 암호 필드에서 Caps-Lock을 전환할 때 메시지를 변경합니다.

사용자가 다른 곳(예: 다른 응용 프로그램이나 브라우저 탭 등)에서 caps-lock 상태를 변경한 다음 이 응용 프로그램으로 돌아올 때도 메시지를 변경합니다.

메모리 누수를 방지하기 위해 구성 요소가 소멸될 때 이벤트를 제거합니다.

ChangeDetectionStrategy가 OnPush인 경우 변경 감지를 실행합니다.

1과 2에 대해 알아보겠습니다.

By the way, I am on @angular/cli 13.3.0 and @angular/material 13.3.6. For the message, I have used mat-hint on mat-form-field.

이를 달성하기 위해 (@ViewChild 사용) 암호 필드의 참조를 가져온 다음 두 개의 이벤트 핸들러를 기본 HTMLInputElement - keyup 및 mousedown 에 추가합니다.
keyup 이벤트 핸들러는 사용자가 비밀번호 필드에 있는 동안 CAPS-LOCK 버튼을 전환할 때 메시지를 전환합니다. 이것은 KeyboardEvent를 생성합니다.
mousedown 이벤트 처리기는 사용자가 다른 곳에서 상태를 변경하고 응용 프로그램으로 다시 이동하여 암호 필드를 클릭할 때 메시지를 토글합니다. 이제 무언가를 입력하기 전에 정보가 제공되기 때문에 이것은 사용자에게 유익할 것입니다. 이것은 MouseEvent를 통해 수행됩니다.

몇 가지 개선 사항:

메모리 누수를 방지하려면 구성 요소가 소멸된 후 이러한 이벤트 핸들러를 제거해야 합니다.

ChangeDetectionStrategy가 OnPush로 설정된 경우 위의 이벤트 중 하나가 발생할 때마다 변경 감지를 위해 구성 요소를 표시해야 합니다. 따라서 이벤트 핸들러의 끝에서 다음을 사용하십시오.

this.cdRef.markForCheck();

브라우저의 암호 관리자는 암호 데이터를 자동으로 채울 수 있습니다. 이것은 또한 keyup 이벤트를 발생시키지만 이것은 KeyboardEvent의 인스턴스가 아니므로 getModifierState 메서드가 없습니다. 그래서 우리는 이것을 무시할 것입니다!

if (event?.type === 'keyup' && !(event instanceof KeyboardEvent)) {
  return;
}

건배!
나는 당신과 연결하고 싶습니다