jQuery - blur, focusout 처리전에 click이벤트 발생시키기

UI를 작성하다보면 input 박스 안에 버튼 이미지를 위치시키고 입력받은 값에 따라 보여주고 사라지고 제어등을 하게 되는 경우가 있다.

 

조건은 아래와 같다.

1. 입력하고자 하는 input에 focus를 잃는 경우(blur 발생) 버튼을 사라지게 하는 이벤트를 추가

2. 입력하는 input에 focus를 얻은 상태에서 입력중이면 버튼이 활성화

3. 활성화된 버튼을 클릭하면 input의 데이터가 다 지워짐

 

 

문제는 click보다 blur가 더 빨리 동작한다는 것이다.

 

stackoverflow의 글 덕분에 꼼수로 간단하게 해결하였다.

https://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

jQuery: fire click() before blur() event

 

 

click대신 mousedown 이벤트를 사용하였다.

 

아래는 실제 동작시킨 스크립트 코드이다.

$('.inp_box').on("mousedown", ".inp_remove_btn", function(){ //click 사용안됨 //blur가 더 빨리 동작함
    $(this).siblings("input").val("");

}).on("change keyup input", "input", function(e){ //입력이 시작되면 삭제버튼 활성화
    $(this).siblings(".inp_remove_btn").addClass("active");

}).on("blur", "input", function(e){ //input focus를 잃으면 삭제버튼 비활성화
    $(this).siblings(".inp_remove_btn").removeClass("active");

}).on("focus", "input", function(e){ //input focus를 얻으면 길이 체크하여 삭제버튼 활성화 유무체크
    if($(this).val().length > 0){
        $(this).siblings(".inp_remove_btn").addClass("active");
    }
});