jQuery focus/focusout

[jQuery focus/focusout]

은근 자주사용하는 패턴인거같다.

찾기 버튼에 마우스를 올리면 숨겨진 input영역이 나오고 마우스를 떼면 input  영역이 사라지는.. 

하지만 이때 원하지 않는 효과가 하나 발생한다. 

input에 텍스트를 입력하다가 마우스 커서가 움직일때 그 영역까지 사라져버린다면? 

사용자 입장에서는 당황할것... 

원하는 효과는 딱 이것이다. 

1. 글을 입력하는 동안(input내 커서 활성화)은 마우스를 움직여도 input이 사라지지 않도록

2. input이 아닌 다른 영역을 클릭할 경우 input사라지도록

바로 focus와 focusout을 사용하는것이다.

$( "input" ).focus(function() {

     $(this).addClass('focus');

 });

$( "input" ).focusout(function() {

     $(this).removeClass('focus');

});