태그게시판 관련 자바 문의드립니다.

 $("#tagIpt").on("keyup", function(event) {
            $(".tagListIpt ul li span").removeClass('overlap');
            if(event.keyCode == 32){
                $(this).val($(this).val().replace(/ /gi, ""));
                inputTag($(this).val());
            }
        });

자바에 ㅈ 자도 모르는 초보입니다. 현재 스페이스바를 누르면 이벤트(한개의 태그입력완료)가 발생하게 되어있습니다.

저는 여기 그누보드 Q&A 게시판처럼 마우스로 다른 영역을 클릭했을때도 이벤트가 발생하기를 원하는데 초보만이 가능한 무한한 상상의 나래를 펴도 도저히 엄두가 안나네요. 일단 스페이스바를 엔터로 바꾸면 될까 싶어서 저 32를 13으로 변경해서 해봤는데 이벤트 발생보다 먼저 글이 등록되는 거 같습니다. 

사용하고자 하는 게시판은

jun31019님의

https://sir.kr/g5_skin/27608 태그게시판입니다. 

많이 까다로운 부분이라면 대충 어떤식으로 하라고 알려주시면

구글링 과 상상력을 동원해서 도전해보겠습니다.

아래는 전체 소스입니다. 감사합니다.

<script>
    
    $(window).ready(function(){
        
        $(document).on('click','.tag > i',function(){
            $(this).parent().remove();
        });
        
        $(".ppTag").click(function(){
            inputTag($(this).data('word'));
            return false;
        });

        $("#tagIpt").on("keyup", function(event) {
            $(".tagListIpt ul li span").removeClass('overlap');
            if(event.keyCode == 32){
                $(this).val($(this).val().replace(/ /gi, ""));
                inputTag($(this).val());
            }
        });

    });

    function inputTagList(){
        var linCnt = $(".tagListIpt ul li.tag").length;
        var tag = '';
        for(var i=0; i<linCnt; i++){
            var j = i+1;
            if(!tag){
                tag = $(".tagListIpt ul li:nth-child("+j+") span").html();
            }else{
                tag += ','+$(".tagListIpt ul li:nth-child("+j+") span").html();
            }
        }
        tag = tag.replace(" ", "");
        console.log('after replace : '+tag);
        $("#wr_2").val(tag);
    }

    function chkOverlap(a){
        var linCnt = $(".tagListIpt ul li.tag").length;
        var overlap = false;
        for(var i=0; i<linCnt; i++){
            var j = i+1;
            if(a == $(".tagListIpt ul li:nth-child("+j+") span").html()){
                $(".tagListIpt ul li:nth-child("+j+") span").addClass('overlap');
                overlap = true;
            }
        }

        return overlap;
    }

    function inputTag(a){
        
        a = a.replace(/ /g, '');
        
        var linCnt = $(".tagListIpt ul li.tag").length;
        
        if(chkOverlap(a) == false){

            if(linCnt < 10){
                var taghtml_ = '';
                
                taghtml_ += '<li class="tag">#<span>';
                taghtml_ += a;
                taghtml_ += '</span><i class="fa fa-times" aria-hidden="true"></i></li>';    
                
                $(".tabTxt").before(taghtml_);
            }else{
                alert('태그틑 최대 10개까지 입력가능합니다.');    
            }
            
            $("#tagIpt").val('');

        }
    }    

</script>