[jQuery] 특정 요소에 포커스 주고 빼기 feat. focus() and blur()

jQuery 에서 특정 요소(element)에 포커스를 주고 빼는 방법을 알아 봅시다.

포커스(focus) 란?

예를 들어서 이런거죠. <input type="text"> 태그로 만들어진 텍스트박스가 있는데 사용자가 이 텍스트박스에 어떤 자료를 입력 하기 위해 클릭하고 커서가 깜빡이는 상황이 되면 포커스를 가진 것입니다.

반대로 위 텍스트박스에서의 작업을 마치고 다른 텍스트박스에 작업을 하기 위해 사용자가 옮겨 간다면 위 텍스트박스는 포커스를 잃은 것입니다.

jQuery 에서 강제로 포커스 주고 빼기

간단한 예제를 봅시다.

/* HTML */
<span onclick="focusblurtest()">Button</span>
<input type="text" id="textbox">

/* jQuery */
function focusblurtest() {
  $('#textbox').focus();
  /* do what you want to do */
  $('#textbox').blur();
}

아주 간단합니다. <span> 요소를 클릭 하면 focusblurtest() 라는 함수를 실행 시키는데, 그 때 id 가 textbox 인 input 박스를 활성화 시켜서 특정 작업을 실행 한 후 포커스를 제외 시키는 것입니다.

아주 간단하죠?

참고자료

1. jQuery – .focus
2. jQuery – .blur