Internet Explorer에서 자동 포커스 사용 시 모달의 이상한 커서 위치 문제 해결 방법

문제 개요

HTML의 autofocus(자동 초점) 속성이 적용된 입력 요소가 들어 있는 모달(Modal)을 Internet Explorer에서 열면, 커서(캐럿)가 의도한 입력 필드에 놓이지 않고 엉뚱한 위치에 배치되는 현상이 발생할 수 있습니다. 이는 IE가 모달이 슬라이드하면서 나타나는 애니메이션을 처리하는 방식 때문에 생기는 문제입니다.

해결 방법 1: 페이드 전환만 적용하기

모달의 등장 애니메이션을 슬라이드 대신 순수한 페이드(fade) 효과로 변경하면 문제를 해결할 수 있습니다. 아래 CSS를 추가하세요.

.modal.fade {
    transition: opacity .3s linear;
}

이렇게 하면 모달이 위아래로 움직이지 않고 부드럽게 나타나며, 자동 포커스와 커서 위치도 올바르게 적용됩니다.

해결 방법 2: windowClass로 강제 페이드 처리

JavaScript 기반 UI 라이브러리(예: Angular UI Bootstrap)를 사용하는 경우에는 windowClass 옵션을 활용해 모달이 슬라이딩 없이 페이드 인 되도록 강제할 수도 있습니다.

windowClass: 'modal fade in'

위 두 가지 방법 중 프로젝트 상황에 맞는 것을 선택해 적용하면, Internet Explorer에서도 자동 포커스가 정상 동작하고 커서가 올바른 위치에 배치됩니다.