jQuery 공작소 : .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_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_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/