• 회원가입
  • 로그인

[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>


결과보기

평정심 님 (191116) https://sir.kr/qa/331722

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012