jQuery 공작소 : :focus

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

:focus 셀렉터는 현재 fucus된 요소를 찾습니다.

예제 1
보기
아래 텍스트박스를 클릭해 보세요
클릭한 (focus가 활성화된) 것의 값을 읽어옵니다.


소스
<style type="text/css">
    .css_test input {
        border : 3px solid gray;
        padding : 5px;
        width : 80px;
    }
    .css_test textarea {
        border : 3px solid gray;
        height : 100px;
        margin-top : 10px;
        width : 250px;
    }
</style>

아래 텍스트박스를 클릭해 보세요<br>
클릭한 (focus가 활성화된) 것의 값을 읽어옵니다.<br><br>

<div class="css_test">
    <input type="text" value="더헛" />
    <input type="text" value="심쿵" />
    <input type="text" value="데헷" /><br>
    <textarea></textarea>
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test textarea').val($('.css_test input:focus').val());
    }
    setInterval( j_test, 100 );
</script>
관련 CSS
jQuery

$( '셀렉터:focus' )  -  해당 셀렉터중 focus가 활성화된 것을 찾습니다.
$( '.css_test  input:focus' )  -  클래스명이 css_test 인 요소의 inputfocus 된 것을 찾음.
$( '.css_test  :focus' )  -  클래스명이 css_test 인 요소에서 focus 된 것을 찾음.

jQuery 홈페이지 :focus API 문서 : http://api.jquery.com/focus-selector/