Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

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]

저작자표시

'Web publishing > jQuery' 카테고리의 다른 글

눈여겨 볼만한 jQuery 플러그인  (0) 2013.05.07
CSS Tab Navigation + List Item Navigation.  (0) 2013.03.28
[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제.  (0) 2013.03.26
[Jquery] Show each Easing Method  (0) 2013.03.26
[Library] zeroclipboard  (0) 2013.03.21
'Web publishing/jQuery' Related Articles more