Angular @HostListener를 이용해 Backspace (뒤로가기) 막기

IE, Firefox 브라우저를 사용하는 경우 input, textarea와 같이 입력가능한 element가 아닌 곳에서 backspace를 누르면 뒤로가기가 실행 됩니다.

Angular 에서 @HostListener를 이용해 keyboardEvent를 받아 상황에 따른 backspace 처리를 해서 해결 할 수 있습니다.

아래의 코드를 app.component 혹은 전역적으로 실행 될 수 있는곳에 추가합니다.

  // @HostListener 를 이용해 document 의 keydown 이벤트 수신
  @HostListener('document:keydown', ['$event'])
  onKeyDown(keyboardEvent: KeyboardEvent) {
    // KeyboardEvent key 를 확인해 backspace인 경우
    if (keyboardEvent.key === 'Backspace') {
      // backspace 의 경우 기본적으로 prevent 처리
      let disableBackspace = true;
      const target = keyboardEvent.target as HTMLElement;

      // KeyboardEvent 가 발생한 곳이 Input, TextArea인 경우
      if (target instanceof HTMLInputElement || target instanceof  HTMLTextAreaElement) {
        // Input, TextArea가 diabled, readOnly가 아닌경우 backspace 허용
        if (!target.disabled && !target.readOnly) {
          disableBackspace = false;
        }
      }

      if (disableBackspace) {
        // KeyboardEvent prevent 처리
        keyboardEvent.preventDefault();
      }
    }
  }