jQuery focus 포커스 처리

 

jQuery focus 포커스 처리

 

이번 포스팅에서는 jQuery의 포커스 처리에 대해서 알아보겠습니다.

jQuery 에서의 포커스는 .focus()  함수를 사용합니다.

포커스는 보통 

입력부의 입력 가능한 첫번째 항목으로 포커를 보내거나

특정 element에 포커스가 갔을 경우 이벤트 발생시

많이 사용됩니다.

그럼 사용법을 보도록 하죠.

<form id="focus_test_form">

<dl>

<dt>id</dt>

<dd><input type="text"></dd>

<dt>pw</dt>

<dd><input type="text"></dd>

<dt>nm</dt>

<dd><input type="password"></dd>

<dt>age</dt>

<dd><input type="text"></dd>

<dt>tel</dt>

<dd><input type="text" id="tel"></dd>

        </dl>

</form>

위와 같은 폼이 있습니다.

페이지 로딩시 id를 입력할수 있는 text창(입력가능한 첫번째 항목)에 포커스를 

보내보도록 합시다.

(사용자가 마우스를 '한번' 클릭 하는 수고(?)를 덜도록..)

<script>
$(document).ready(function(){
    $("#focus_test_form :input:text:visible:enabled:first").focus();
});
</script>

스크립트를 설명하자면.

페이지의 HTML DOM을 load 한 후 바로

id가 focus_test_form인 폼에서 모든 input element 찾고 그중에 type이 text이고 visible 하고 enabled 한

첫번 째 값에 포커스를 보낸다 입니다.

(#focus_test_form과 :input 사이에는 한칸(space) 띄워야함.)

DOM 에 대한 설명은 Link를 참조

Link : DOM(document Object Model) 이란?

그리 어렵지 않죠? 물론 위의 폼에서는 visible, disabled 조건이 없기 때문에

$("#focus_test_form :input:text:first").focus(); 이렇게만 하셔도 

포커스는 가게 됩니다. 하지만 조건들이 추가되더라도 '입력 가능한' 첫번째

항목에 포커스를 보내야 함으로 :visible과 :enabled를 추가하였습니다.

예로 id입력부에 disabled 조건을 주게 되면

<dd><input type="text" disabled="true"></dd>

두번째 input은 type이 password이니 패스하고

세번째 값인 age로 넘어가게되겠죠.

그럼 포커스를 보내는 것이 아닌

특정 element에 포커스가 갔을 경우의 이벤트 발생에 대해

알아보도록 하겠습니다.

5번째 입력값인 tel의 text박스에 포커스가 갔을 경우

"입력형식 예 : 000-0000-0000" 라는 알림창을 띄워 보도록 하겠습니다.

<script>
$(document).ready(function(){
    $("#focus_test_form :input:text:visible:enabled:first").focus();
 
    $("#tel").focus(function(){
        alert("입력형식 예 : 000-0000-0000");
    }); 
});
</script>

id가 tel인 것을 찾아 포커스가 가면 경고창을 띄워라 입니다.

#이나 . 이 이해가 안되시는 분은 Link를 참조하세요.

Link : jQuery Selector 셀렉터 사용법

포커스 처리는 사용자의 편의를 위해 자주 사용됩니다.

포커스 처리가 안된 경우 사용자가 "페이지 시작할때 저길로 포커스좀 보내주세요"

와 같은 요청이 오기도 합니다.

어려운 부분이 아니니 확실히 알고 넘어가도록 합시다.