.blur()

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

blur 메서드는 해당요소에 blur 이벤트를 생성하거나 발생시킵니다.
onblur 속성과 같습니다.

+_+
예제 1
선택이 비활성 되었을때 실행
보기
아래 폼요소들을 클릭 후 화면의 빈곳을 클릭해 보세요.






소스
<style type="text/css">
    .css_test .display {
        font-weight : bold;
        margin-top : 10px;
    }
    .css_test input, .css_test textarea {
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
    }
</style>

아래 폼요소들을 클릭 후 화면의 빈곳을 클릭해 보세요.<br><br>

<div class="css_test">
    <input type="button" value="Input Button"><br>
    <input type="checkbox"><br>
    <input type="password"><br>
    <input type="radio"><br>
    <input type="text"><br>
    <div class="display"></div>
</div>

<script type="text/javascript">
    $( '.css_test input' ).blur( function(){
        $( '.css_test .display' ).html( '방금 만진것은 ' + $(this).attr('type') );
    });
</script>
관련 CSS
jQuery

$( '.css_test  input' ).blur( function(){
    코드
}
)

- 클래스명이 css_test 인 요소의 input비활성 상태로 되었을때 입력한 코드실행
- 비활성 상태란 클릭등으로 선택되어졌다가 다시 선택되지 않은 상태로 돌아간 경우를 말합니다.
- onfocus 의 반대 입니다.

예제 2
요소를 선택하지 못하게 하기
보기
텍스트 박스를 클릭해 보세요. 커서가 들어가지 않을 것입니다.


소스
<style type="text/css">
    .css_test input{
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
        width : 200px;
    }
</style>

텍스트 박스를 클릭해 보세요. 커서가 들어가지 않을 것입니다.<br><br>

<div class="css_test">
    <input type="text" value="jQuery 공작소" onclick="$(this).blur()"><br>
</div>
관련 CSS
jQuery

onclick="$( this ).blur()"  -  이렇게 하면 활성화시 바로 비활성화 됩니다.

jQuery 홈페이지 .blur() API 문서 : http://api.jquery.com/blur/