IT/JavaScript

[javascript] 모달에서 키보드 눌렀을 때 반응 처리하기

밍띠이 2023. 12. 3. 19:09
반응형

키보드 이벤트 리스너는 document에서 전체적으로 관리한다.

익명함수에도 e 등 파라미터를 넣어 줄 수 있다.

모달 닫기 전, 꼭 현재 상태를 확인한 뒤 모달을 닫거나 다른 작업들을 처리해 주는것이 중요하다.

document.addEventListener('keydown', function (e) {
  if (e.key == 'Escape' && !modal.classList.contains('hidden')) { // esc 키 눌렀을때, modal 에 hidden 이 없을 경우에
    hiddenModal(); // SOMETHING TO DO..
  } else if (e.key == 'Enter') {	// 엔터키 눌렀을 때
    hiddenModal(); // SOMETHING TO DO...
  }
});
반응형