[Event] JQ - blur() 메서드 ★ - 포커스 해제/제거（= blur메서드 = 블러메서드) ※ 포커스 시 아웃라인 제거

목차

1. blur() 예제 - input 요소 포커스 해제 시 효과 주기
2. blur() 정의
3. blur() 구문
4. 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>

결과보기