focus
원문 링크 
http://api.jquery.com/focus/
개요 : "focus" JavaScript 이벤트를 바인드 하거나 요소에 해당 이벤트를 발생시킵니다.
- .focus( handler(eventObject) )
- handler(eventObject) 이벤트가 발생하면 실행될 기능
- .focus( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생하면 실행될 기능
- .focus()
이 함수는 .bind('focus', handler), .trigger('focus') 를 줄여 표현한 것입니다.
focus 이벤트는 요소가 포커스를 획득하면 발생합니다. form 요소들(<input>, <select>, etc.) 과 링크들 (<a href>) 같은 요소의 제한된 집합에 암시적으로 적용됩니다. 최근 브라우저 버전에서는 명시적으로 요소의 tabindex 속성을 설정하여 이벤트를 모든 요소 유형에 포함하도록 확장할 수 있게 되었습니다.
초점을 맞춘 요소는 일반적으로 요소를 둘러싼 점선이 표시되는 형태처럼 브라우저에 의해 강조가 됩니다. focus는 키보드 관련 이벤트를 받을 수 있는 첫 번째 요소를 결정하는 데 사용됩니다.
예제를 보면:
<form> <input id="target" type="text" value="Field 1" /> <input type="text" value="Field 2" /> </form> <div id="other"> Trigger the handler </div>
첫번째 input 필드에 이벤트를 바인드 하려면:
$('#target').focus(function() {
alert('Handler for .focus() called.');
});첫번째 필드를 클릭하거나 탭인하면 알림창이 나타납니다.
다른 요소를 클릭해서 이벤트를 발생시킬수도 있습니다.
$('#other').click(function() {
$('#target').focus();
});이 코드 또한 div를 클릭하면 알림창이 나타나게 됩니다.
숨겨진 요소에 포커스를 발생시키면 Internet Explorer 에서는 에러가 발생합니다. 요소에 매개 변수없이 호출하는데 주의를 기울여야 합니다.
예 제
포커스 발생시키기.
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>미리보기
하하. 번갈아가며 클릭해 보세요. 신기해요~. jQuery 너란 녀석~~
예 제
input 박스에 글쓰기를 방지하려면
$("input[type=text]").focus(function(){
$(this).blur();
});
예 제
페이지 시작 시 아이디 입력 필드에 포커스 주기 :
$(document).ready(function(){
$("#login").focus();
});
숨긴 필드에 포커스를 넣을 일은 없겠죠. 그 점만 신경쓰면 괜찮을거 같네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0) | 2011.12.26 |
|---|---|
| jQuery API 정복 - keypress(), 브라우져의 키 누름 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - keydown(), 키보드 누름 이벤트 (2) | 2011.12.26 |
| jQuery API 정복 - hover(), 마우스 오버 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - event.timeStamp, 이벤트 사이의 시간 (0) | 2011.12.13 |
| jQuery API 정복 - event.target, 이벤트가 발생한 요소 (2) | 2011.12.13 |
| jQuery API 정복 - event.pageY, 마우스 Y 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - event.pageX, 마우스 X 좌표 (0) | 2011.12.13 |