modal에 keydown 이벤트 추가하기 (tabindex)

modal

모달은 보통 웹사이트를 구성할 때 상세보기, 경고창 등을 나타낼 때 쓰는 팝업 윈도우다

영상에서 보는 것과 같이 x표를 눌러서 끌 창을 끄거나 모달 윈도우 바깥 영역을 클릭해서 창을 끌 수 있다

key event

x를 누르거나 영역 바깥을 누르는 것은 클릭 이벤트로 쉽게 구현할 수 있는데 ESC를 눌러서 윈도우를 끄려면 어떻게 해야할까?

html은 대충 modal 부분이 다음과 같다

<div class="modal">
    <div class="modal-container">
        <span class="modal-close">&times;</span>
        <div class="modal-text">Modal</div>
        <div class="context">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores, beatae culpa cumque debitis eaque error ipsum maxime necessitatibus nobis odio optio perspiciatis possimus quas recusandae sed tenetur, voluptate. Explicabo!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cum eligendi facere fugiat iusto nesciunt nihil qui sint tempore voluptas? Aperiam dolore magni nam optio, quos sunt unde ut veritatis.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos expedita inventore, labore laudantium, nesciunt omnis quae quisquam reiciendis reprehenderit velit voluptas voluptatem! Consequatur illo ipsa molestias necessitatibus, repellat tempore.
        </div>
    </div>
</div>

자바스크립트에서 modal을 불러온 뒤에 keydown 이벤트를 등록해보자

const $modal = document.querySelector('.modal');

$modal.addEventListener('keydown',e=>{
    console.log(e);
});

암만 눌러봐도 키 다운 이벤트가 발생하지 않는데 modal이 div태그라서 그렇다

이를 해결하기 위해선 div에 contentable이나 tabindex 속성을 추가해주면되는데 이 모달에서는 입력을 받을 필요가 없어서 tabindex 속성을 주면된다

tabindex 속성을 주게되면 해당 속성을 가진 태그에 focus할 수 있게되고 focus가 가는 순간부터 키보드 입력이 가능해진다

<div class="modal" tabindex="0">
  ...

키 입력이 가능해진 모습, 하지만 포커스 중에 css의 outline이 파란색으로 강조되고 있다

이건 css outline 속성에 none으로 처리해주면된다

const $modal = document.querySelector('.modal');

$modal.addEventListener('keydown',e=>{
    if(e.key==='Escape') $modal.style.display = 'none';
});

이제 ESC를 누르면 모달이 꺼지는데

아직 한 가지 문제가 있다 modal에 keydown 이벤트가 등록되어있기 때문에 키보드 입력을 받기 위해서는 modal에 focus가 있어야한다

html 태그에서 autofocus 속성을 주어도 의미가 없는데 modal은 처음부터 생성되어있고 클릭 이벤트시에 display의 상태가 바뀌는 것이기 때문에

display의 상태가 바뀌는 코드에 엘리먼트 노드에 focus메서드를 사용해주면 된다

...
//in click Event
  $modal.style.display ='flex';
  $modal.focus();
...