<div id="readability-page-1" class="page"><article id="post-11319">
				

							<div>
												
<p>모바일 환경에서 모달 내부의 <code>&lt;input&gt;</code> 필드에 한글입력중 스크롤을 내린 후 저장 버튼을 누르게 되면, IME 입력상태를 완료하기 위해 다시 <code>&lt;input&gt;</code> 필드로 스크롤이 올라간 이후에 포커스 아웃되는 경우가 있다.(저장실패)</p>
<p>이를 해결하기 위해 Input Blur 처리를 해준다.</p>
<h2>구현 방법</h2>
<ol>
<li>스크롤 이벤트 핸들러 작성</li>
</ol>
<pre><code>  const handleScroll = () =&gt; {
    if (document.activeElement instanceof HTMLInputElement) {
      document.activeElement.blur()
    }
  }</code></pre>
<ol start="2">
<li>스크롤 영역에 이벤트 바인딩</li>
</ol>
<pre><code>  &lt;template&gt;
    &lt;div class="modal-overlay"&gt;
      &lt;div class="modal-content" @scroll="handleScroll"&gt;
        &lt;!-- 모달 내용 --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
<p>코드 설명</p>
<ul>
<li>document.activeElement: 현재 포커스된 DOM 요소를 반환</li>
<li>instanceof HTMLInputElement: 포커스된 요소가 input인지 확인</li>
<li>
<p>.blur(): 해당 요소의 포커스 해제</p>
<p>확장: select, textarea 포함</p>
</li>
</ul>
<pre><code>  const handleScroll = () =&gt; {
    const active = document.activeElement
    if (
      active instanceof HTMLInputElement ||
      active instanceof HTMLSelectElement ||
      active instanceof HTMLTextAreaElement
    ) {
      active.blur()
    }
  }</code></pre>
<p><span></span> <span>Post Views:</span> <span>12</span>
			</p>											</div>
		
	
	</article></div>

상구리의 기술 블로그

Vue.js 모달 스크롤 시 Input Blur 처리
모바일 환경에서 모달 내부의 <input> 필드에 한글입력중 스크롤을 내린 후 저장 버튼을 누르게 되면, IME 입력상태를 완료하기 위해 다시 <input> 필드로 스크롤이 올라간 이후에 포커스 아웃되는 경우가 있다.(저장실패)
이를 해결하기 위해 Input Blur 처리를 해준다.
구현 방법
스크롤 이벤트 핸들러 작성
  const handleScroll = () => {
    if (document.activeElement instanceof HTMLInputElement) {
      document.activeElement.blur()
    }
  }
스크롤 영역에 이벤트 바인딩
  <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()
    }
  }

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

댓글