관리 메뉴

I LOVE EJ

jQuery 1.4 추가사항 - .focusin(), .focusout() 본문

Web publishing/jQuery

jQuery 1.4 추가사항 - .focusin(), .focusout()

BeOne 2013. 3. 28. 15:16

jQuery 1.3.2 버전에서 존재하던 .focus() 이벤트를 업그레이드 한 것으로 해당 input 요소에 focus가 들어갔을때 와 나왔을때에 이벤트가 발쌩하는 기능입니다.

 

기본적인 사용법

 

.focusin( handler(eventObject) )
.focusout( handler(eventObject) )


handler(eventObject)는 이벤트가 발생할 때 마다 수행할 이벤트 오프젝트나 함수를 지정해 주시면됩니다.

 

예제를 보시면 쉽게 이해할 수 있으실듯 합니다.

 

예제 : http://coterie.hosting.paran.com/focus/

 

예제 소스

 

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>테스트</title>
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input[name=test1]").focusin(function(){
    $("span:first").text('포커스인').show().fadeOut('slow');
  }).focusout(function(){
    $("span:first").text('포커스아웃').show().fadeOut('slow');
  });
  $("input[name=test2]").focusin(function(){
    $("span:last").text('포커스인').show().fadeOut('slow');
  }).focusout(function(){
    $("span:last").text('포커스아웃').show().fadeOut('slow');
  });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <input name="test1" value="" /><span></span><br />
  <input name="test2" value="" /><span></span>
</body>
</html>[/code]