[jQuery]focus()가 안될 땐 이 함수로 대체해보자

 

 

안녕하세요 무택입니다 :)

오늘은 focus() 함수를 사용하려고 하는데 작동하지 않을 때 사용할 수 있는 setTimeout() 함수에 대해 써보려고 합니다.

 

 

codepen 예시

See the Pen Untitled by TytanLee (@TytanLee) on CodePen.

위 예시를 보면 아시겠지만 저는 버튼을 누르면 검색창을 띄워서 바로 자동으로 입력가능한 UX를 만들고 싶었습니다. 검색창을 누르고 input탭을 누르는 과정을 생략시켜 주면 사용자 입장에서는 편하기 때문에 focus 기능을 사용하려고 했는데 함수가 작동이 안 되더라구요.

 

그래서 대체 함수를 찾다가 setTimeout() 함수를 이용해서 구현해 봤습니다. 위 예시에서 보면 알 수 있듯이 focus()를 이용했을 때는 기능이 작동하지 않다가 setTimeout()을 이용하니까 정상적으로 작동되었습니다.

 

 

 

HTML

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<button onclick="sc_active01(); auto_focus();">검색창 활성화_focus</button>
<div id="sc_div_01">
  <input type="text" id="sc_iput_01" placeholder="검색할 ‘단어’를 입력하세요." required>
</div>

<button onclick="sc_active02(); auto_focus_setTimeout()">검색창 활성화_setTimeout</button>
<div id="sc_div_02">
  <input type="text" id="sc_iput_02" placeholder="검색할 ‘단어’를 입력하세요." required>
</div>

 

 

CSS

* {
  list-style: none; padding: 0; margin: 0;
}
div {
  opacity: 0;
  position: relative;
  top: -5px;
  transition: all .2s;
  margin-bottom: 50px;
  visibility: hidden;
}
.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

 

 

JS(jQuery)

function sc_active01() {
  $('#sc_div_01').toggleClass('active');
}
function sc_active02() {
  $('#sc_div_02').toggleClass('active');
}
function auto_focus() {
  $('#sc_iput_01').focus();
}
function auto_focus_setTimeout() {
  setTimeout( function(){ $('#sc_iput_02').focus();}, 50 );
}

 

 

focus()가 작동 안 되는 이유

테스트를 해본 결과 visibility 옵션의 유무에 따라 focus가 작동되지 않는 걸 확인했습니다. opacity만으로 보이고 안 보이는 걸 조정하면 해당 영역은 살아있고 보이지만 않기 때문에 프론트 단에서 오류가 발생할 확률이 있습니다. 그렇기 때문에 visibility 옵션을 추가로 사용하는데 이 옵션이 문제였습니다. visibility를 사용하지 않으면 focus()가 정상적으로 작동하는 걸 알 수 있습니다.