목차
- blur() 예제 - input 요소 포커스 해제 시 효과 주기
- blur() 정의
- blur() 구문
- blur() 예제 - textarea 포커스 시, 포커스 표시 효과 제거
blur() 예제 - input 요소 포커스 해제 시 효과 주기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#0084ff");
$(this).css("color", "#ffffff");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
$(this).css("color", "#000000");
});
});
</script>
<p>홈짱닷컴 (Homzzang.com)</p>
<div>
이름: <input type="text" name="name"><br>
메일: <input type="text" name="email">
</div>
blur() 정의
blur 이벤트가 요소가 foucs 잃을 때 발생.
※ blur() 메서드는 아래 2가지 역할 수행.
① blur 이벤트 촉발.
② blur 이벤트 발생 시 실행할 함수 부착.
※ focus() 메서드와 주로 함께 사용함.
blur() 구문
blur 이벤트 촉발.
$(selector).blur()
blur 이벤트에 함수 부착.
$(selector).blur(function)
[매개변수]
function
선택. blur 이벤트 발생 시 실행할 함수 지정.
blur() 예제 - textarea 포커스 시, 포커스 표시 효과 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$(".cmt_btn").on("focus", function(){
$(this).blur();
});
});
</script>
<textarea class="cmt_btn">댓글목록</textarea>
결과보기