CMS 라이믹스(XE) 오픈 자료실 보관 자료실 상품제안 제품매뉴얼 모듈 매뉴얼 버전 관리 관련사이트 워드프레스 그누보드 카페24 고도몰 제로보드4 CGI

[pjaxboard] 검색 버튼 클릭시 자동으로 검색창에 포커스 주기

2017년 07월 03일

pjaxboard 스킨에서 상단 검색 버튼을 클릭시 자동으로 검색창에 포커스를 주는 팁입니다.

// pjaxboard 검색
 $('a.trigger-search').on('mouseleave',function(){
$("input[name=search_keyword]").focus();
 });

click 이벤트로 주려니, 클릭 동작의 포커스와 충돌하는 문제 때문에 mouseleave로 깔끔하게 성공했습니다.

참조 : https://vnthf.github.io/blog/jquery-focusout%EA%B3%BCclick-event%EC%B6%A9%EB%8F%8C/

jQuery(function ($) {
    $('a.trigger-search').on('mouseover',function(){
        searchfocus = true;
 if(searchfocus){
            $("input[name=search_keyword]").focus().css('border','1px solid red');
 }
    });
 $("a.trigger-search").on('mouseleave', function(){
        searchfocus = false;
 if(!searchfocus){
            $("input[name=search_keyword]").focus().css('border','1px solid green');
 }
    });
})