Vue.js 모달 스크롤 시 Input Blur 처리

모바일 환경에서 모달 내부의 <input> 필드에 한글입력중 스크롤을 내린 후 저장 버튼을 누르게 되면, IME 입력상태를 완료하기 위해 다시 <input> 필드로 스크롤이 올라간 이후에 포커스 아웃되는 경우가 있다.(저장실패)

이를 해결하기 위해 Input Blur 처리를 해준다.

구현 방법

1. 스크롤 이벤트 핸들러 작성

  const handleScroll = () => {
    if (document.activeElement instanceof HTMLInputElement) {
      document.activeElement.blur()
    }
  }

2. 스크롤 영역에 이벤트 바인딩

  <template>
    <div class="modal-overlay">
      <div class="modal-content" @scroll="handleScroll">
        <!-- 모달 내용 -->
      </div>
    </div>
  </template>

코드 설명

• document.activeElement: 현재 포커스된 DOM 요소를 반환
• instanceof HTMLInputElement: 포커스된 요소가 input인지 확인

• .blur(): 해당 요소의 포커스 해제

  확장: select, textarea 포함

  const handleScroll = () => {
    const active = document.activeElement
    if (
      active instanceof HTMLInputElement ||
      active instanceof HTMLSelectElement ||
      active instanceof HTMLTextAreaElement
    ) {
      active.blur()
    }
  }