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

Summary

  1. 특정 요소에 포커스를 줄때는 .focus()
  2. 특정 요소의 포커스를 뺄때는 .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() 라는 함수를 실행 시키는데, 그 때 idtextboxinput 박스를 활성화 시켜서 특정 작업을 실행 한 후 포커스를 제외 시키는 것입니다.

아주 간단하죠?

더욱 자세한 내용은 jQuery – .focus 페이지와 jQuery – .blur 페이지를 확인 하시기 바랍니다.

끝.